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Preface de Kasper Skarh0j 



There is a picture of a child standing on the shelf next to me here in my office. It was in 
my grandmother's possession until she moved to an old people's home. The boy in the image 
holds an object in his hand while looking at the camera, interrupted from his investigations by 
the photographer. I don't have kids yet myself so . . . the boy is me as a three-year old. 

The picture fascinates me because it helps me to understand myself and God's design of our 
creative souls. It rips me out of TypoScript, PHP variables and foreach-loops for a moment and 
puts a smile on my face. The picture captures the essence of my personality, which has always 
been curious and creative; from building playhouses on my uncle's farm, shooting VHS-movies 
as a teenager, wiring up a house automation system to, well, programming a "little" CMS tool 
which I accidentally needed in the early days of the passion we all share; the modern Internet. 

Opening the playground 

Creativity defines a lot of who I am. TYP03 has been the output valve of this energy. It is 
the "Very best of" album from my life until now, even with all the quirks it has. I love TYP03 
because I know it is an authentic expression of my creative pulse. But how did it ever come 
this far? 

Let's turn back the clock to 1997 when I began to study at the Technical University of Denmark. 
I think after 5 minutes at the introduction course I had spotted another restless soul in the 
class for whom Taylor polynomials had no significance for the greater meaning in life. We 
teamed up, I created my own little company (Curby Soft Multimedia) and college was where 
I slept the extra hours I missed at night. Back then I was extremely inspired by David Siegel's 
visions for webdesign (www.killersites.com). In fact my "creativity valve" pointed in the visual 
direction back then; my team mate handled the Linux-stuff, I just juggled around with the 
colors. 

The binary brainwash 

The CMS mantra of "separating content from code" was not the brilliant idea of any one 
individual, but what happened to all of us at that time; everyone realized that customers 
needed a CMS tool to maintain their websites. In late 1997 we began the first prototypes 
of what some years later became TYP03. Unfortunately my team mate didn't deliver the 
technical work and my proactive gene autoresponded by closing down Photoshop and starting 
up Homesite, a webbrowser pointed at www.php.net and the installation of a RedHat 6.2 
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server; one week later I had the minimum knowledge required to make lookups in MySQL and 
present the content in an HTML page. And I hated it. 

At the time in 1998 I met another guy with a lot more marketing experience than myself. 
He wanted to commercialize the early version of TYP03. So we set up the "Superfish.com" 
company together, hired employees and even managed to team up with Saatchi Et Saatchi in 
Copenhagen. But I had one condition; that I would be relieved from my role as the programmer 
behind the CMS as fast as possible! It was "Too much work and no fun makes Jack a dull boy" 
for me and my inside was a desert. I was crying out for colors, poetry and visual universes 
to explore. I hated programming, it dried me out and I had accepted it only as a temporary 
necessity. 

Maybe this should scare me, but guess what; now the pain of programming is gone! Slowly 
I was swallowed by PHP until the toxid influence of booleans and arrays made me forget my 
visual gold age; the "re-coding" of a designer into a programmer was successfully complete. 
But even now, the spring of creativity couldn't be suppressed. Rather than being expressed in 
visual terms it permeated the making of TYP03; programming is an art! Programming contains 
love and passion for beautyjust as much as photography or oilpainting does. 

Goodbye World, Hello GPL 

When I realized that running a company like Superfish was not my cup of tea, nothing mat- 
tered more than my creation, TYP03. I left the company with the rights to the code, my partner 
kept the rest. I felt I had passed some kind of "Point of no Return" and all I wanted was to 
finish my work. For what purpose? That question wasn't even asked at the time. I agreed 
with myself to do just enough freelance work to live and put the rest of my time into finishing 
TYP03 over the next six months (it's funny to look back at the repeatedly naive time-estimates 
I have made in the past - and still do :-). 

During my short flirtation with the commercial production of TYP03, 1 realized that commercial 
pressures tend to corrupt the quality of the product; ready or not, it has to go on the shelf 
to create income. That was one thing I couldn't accept as an artist; I believed in quality, and 
compromise in this area was no option to me. On the other hand, with no company behind I 
could probably sell my CMS solution to only a handful of local companies. Compared to the 
perspectives of sharing TYP03 with a whole world and thereby helping thousands of people, 
the latter would far outweigh the joy of making a bit of money locally in Denmark - even if I 
never saw a single Euro coming back. So I chose the GPL way. 

Living waters 

Giving away TYP03 for free also has a strong root in my faith in Jesus. I have been raised in 
a Christian family and always believed in God. But passionate faith can't be inherited and my 
most recent "conversion" happened after having worked 16 hours a day for a long time. I think 
many of you reading this book know the situation and how passion can drive you into intense 
work. It can be fun and rewarding. But in the long run it dries you out inside, and eventually 
you ask yourself: what is the point, what am I living for? This is where some people burn out 
and get depressed. For me it triggered the logical question; If I really believe in the Bible, why 
not open it and read about what a balanced life should be like? 
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This had a dramatic impact on my life. I began to take my faith seriously and re-align my 
actions with my beliefs. I met my wife, Rie. And I discovered my identity and some personal 
gifts, so I could understand my "mission" in life. I also thought about how you could live in a 
Christian way in the modern world. I read "feed the hungry" and found that a useful tool like 
TYP03 would be just that. I read "love your neighbour" and found that sharing TYP03 as the 
best I had would be an act of love. I read "seek and you shall find" and thought that TYP03 
could be just such a reward for those whose who dare to search for alternatives. I read "you 
got it for nothing, give it for nothing" and thought that TYP03 was possible through a talent 
I could only attribute to God, so what would be lost by giving it away? 

Reasons to believe 

Mixing TYP03 with Jesus must seem strange to most of you. Why would an apparently intel- 
ligent guy believe in something fuzzy like God? But in fact I think programmers have nothing 
but good reasons to conclude that some kind of higher intelligence must exist. Every day I 
spend hours writing characters carefully combined into a computer program. I know that a 
single misplaced byte will make TYP03 fail to run. I also know that sometimes I need to make 
an internal redesign which does not add new functionality to TYP03, but merely opens the 
possibility of further development. And who would believe me if I claimed to have created 
TYP03 by repeatedly combining random bytes and trying to execute them until something 
useful came out - even if doing this a trillion times? TYP03 required conscious, intelligent 
design! I have to admit that the complexity of life points to something outside the universe 
itself. It doesn't put a name tag on who is behind it all, but there are good reasons for believing 
in a mastermind. 

The 24/7 lane 

I declare that I am not a perfectionist. Perfection is not obtainable for humans, it is an ideal. 
And although the ideal of perfection is our beacon of light, we have to settle for less. What is 
obtainable is completeness. Completing what you have started is what gives the first step you 
took a meaning. 

TYP03 is my baby, it takes enourmous amounts of my time and often it consumes most of my 
awareness. When people ask me about TYP03 and my own working life, I ask them to think 
about how it was preparing for exams or writing a large thesis at university. I believe that 
captures the intensity of how my life has been for the last four years, while TYP03 has been a 
public project. 

It has been a privilege, fun, challenging all along but it has also worn me out. The most precise 
way to describe this state is to compare me with a fragile ecosystem. Even small changes 
in the environment can have great impacts on stability. Luckily I have developed an equally 
good understanding of my inner self and daily I try to walk the roads that motivate, rather 
than those which lead to despair. I have learned to focus on single issues, and suppress the 
view from the top of the mountain, which can be overwhelming. I have had to trust myself 
to be right many times, when it would have been fair to have doubts. And I have learned to 
strive for perfection but settle for something complete, and sometimes less. It's a strategy of 
survival, and without it the wave you are surfing will swallow you. 
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Growing a community 

It's easy for me to remember for how long I have been married to Rie; I just think about 
when TYP03 was first released to the public - that was also in August 2000 :-) Anyhow, the 
launch of TYP03 to the public was supposed to be the end of the line but it became a whole 
new beginning! At the time I was exhausted after developing for a year on my own with 
no external response. I remember how lonely I felt. Publishing TYP03 under GPL changed 
all this and the growing community became a solid source of power that changed the whole 
perspective of the project; suddenly my work mattered to someone! This was a fulfillment 
of my personal "prophecy" that giving TYP03 away for free would be much more valuable 
than selling licenses to local customers in Denmark. In addition the new situation greatly 
compensated for the loneliness in the office, since I now had virtual colleagues all around the 
globe! 

As an Open Source project, a small community quickly grew up around TYP03, including Rene 
Fritz (co-author of this book) as one of the very first personalities on the scene. People con- 
tributed by setting up mailing lists, archives, providing support to others, creating small plu- 
gins, offering help to port TYP03 to Windows and most significantly, translating TYP03 into 
their native languages. 

In April 2001 Rie and I conceived the idea of arranging a snowboard tour for the community 
and the next winter we did it! 25 people showed up and suddenly faces were attached to 
email addresses. The first snowboard tour was an amazing event and Jan-Hendrik Heuing 
would still quote me for saying "I'm starting to believe in it" back then. The year after we were 
50 people snowboarding the slopes of Splugen, the next year we were more than 80 gathered 
in Kitzbiihel. More than anything else, the annual snowboard event has become the identity 
of the TYP03 community. 

Life in The Bazaar 

The community of TYP03 has grown at an exponential rate ever since. From being a small 
village where everyone knew each other on the mailing lists, it is now a big city with all that 
that entails. The manpower to help is far greater but the risk of getting impersonal is equally 
high. I often receive emails from people asking me support questions. I have to delete them 
flatly. Even answering back that they should use the mailing list can become stressful to me 
and it really breaks my heart, because on the other hand I hold the ideal to be personal to 
everyone. But today I have to trust that the community will take good care of the newbee 
asking for guidance, while I optimize my time for general development which helps thousands, 
rather than a single person. 

The growth of the community also holds great developmental potential. Centered around 
code contributions via the Extension Repository, it is directly possible for anyone to contribute 
quality code to the system in a safe way, which protects the integrity of everyone's work, as 
well as their motivation for contributing. 

My greatest vision for TYP03 is extensions. I strongly believe they are the most perfect vehicle 
for bringing broad innovation to the project and offering maximum freedom for every devel- 
oper to demonstrate his or her personal love for the art and beauty of coding web applications. 
This is the democracy of our community, everyone has equal chances. 
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The challenge we face, as I see it, is to maintain the friendly atmosphere for which we have 
traditionally been known. We also have to maintain an effective framework for contributions 
from the growing number of code authors and apply more quality assurance to contributions 
of all kinds. In another field we have realized the need to enforce the GPL license, asTYP03 has 
become a popular software which obviously would be nice to re-brand and sell as one's own 
work. And finally, we have to fight the prejudiced minds that think Open Source has nothing 
to offer, since there is no fee to pay. 
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mentally absent. She has accepted that she is second choice at times, and we all owe her big 
time for that. 

I want to mention Christian Jul Jensen (Denmark) who has been my good friend and mental 
support through the years, and also my right hand in professional matters. Christian has been 
my personal proxy for a while, taking the load from my shoulders as times changed and TYP03 
needed more of my dedication, rather than me helping old customers. His help has been 
priceless. 

Daniel Hinderink is another cornerstone in the history of TYP03. Daniel is not only professional 
and very skilled. In adition to this he has been a showcase of proactivity to me. Daniel has 
taken the initiative and become the solution to problems, rather than a part of them. As 
the coordinator of marketing efforts for TYP03, he carries a lot of the responsibility for the 
marketing success TYP03 has had. But his initiatives have borne even more fruit in areas such 
as initiating innovation, team building and project organisation. I'm impressed and thankful! 

Now the list of names would explode if I wanted to thank everyone who has contributed to 
TYP03 with code, support or has otherwise been active in the community. Money is good but 
sharing your talents in the community is worth even more! Thank you so much everyone. I 
hope you can recognize the value of sharing the best you have got with the world, as my 
experience described in this preface has been, and I encourage you hang on in there! 

I have received an increasing amount of money donations during the time TYP03 has been 
public. To everyone who has sent money I also want to say thanks from my heart. You have 
enabled me to spend more and more time on TYP03 rather than doing irrelevant freelance 
work. Your donations prove how many small streams make one large flood which eventually 
can power an Open Source project into stable and continual development. I encourage you 
to stay true to your promises of financial support so we can employ more people developing 
TYP03 in the future! 
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Preface de Kasper Skarhej 



I also want to mention Dassault Systemes web department in Paris for their generosity and 
the inspiring friendship we have shared during my times in ParisJhrough their belief in TYP03 
they have supported the development in adventurous ways. 

Finally I want to say "Hello" to all my future friends in the community! TYP03 and the snow- 
board tours are a social pit-stop for me. These relations somehow make the hours behind the 
screen less lonely and in some cases sparks real-world friendships like the one I have been so 
lucky to establish with Robert Lemke from Luneburg. 

Three men in blue overalls 

To me the third snowboard tour in 2004 was a fantastic experience. I saw old friends again, 
I got my own snowboard this time, and I met a lot of new, inspiring people. And finally it 
demonstrated the powerful initiative of the "self-ignited fireworks" that has popped up in the 
community. The men in the mirror finally jumped into their blue overalls and began work. 

Even though the history of TYP03 is more than I could ever ask for, I always joked about the 
day when there would be a book about TYP03 on the shelves in my local bookstore. Three 
talented community members have now made this dream come true. They asked for a book 
and found the answer to its creation in their own mirror reflections. I'm thrilled about the 
outcome and thankful for your contribution to the big picture of completeness we are striving 
for. 

Enjoy the book and welcome to the TYP03 corner of cyberspace! 
- kasper 
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Preface des auteurs 



TYP03 est un systeme de gestion de contenu Open Source qui rencontre un immense succes 
et est repute etre tres puissant, mais aussi fort complexe. Dans ce livre, nous avons essaye de 
decrire TYP03 dans les grandes lignes, fournissant ainsi un apercu de son utilisation tant pour 
les redacteurs que pour les administrateurs et les developpeurs. 

En raison des nombreuses references et de la quantite de didacticiels existants, nous avons 
souleve la question de I'apport potentiel de ce livre. Le flot de questions des listes email n'a 
apparemment pas ete endigue par la documentation existante. Apres une longue observation 
des problemes et des questions les plus caraeteristiques, nous avons decide d'ecrire un livre 
s'efforcant d'illustrer les principes de TYP03 et de demontrer ses applications pratiques a tra- 
vers des exemples. Ce livre ne doit done pas etre considere comme un substitut aux references 
et aux didacticiels de typo3.org ; il devrait plutot faire office de lien servant a developper une 
image coherente de ce qu'est TYP03 pour les debutants, les utilisateurs et les developpeurs, en 
leur permettant d'y naviguer par eux-memes. 

Le projet TYP03 a tache de diviser tous les niveaux de documentation et de communication 
en trois groupes, afin de simplifier la navigation. Ce livre procedera de meme : 

1. Redaction : decrit les outils du systeme pour la creation du contenu et decrit les me- 
thodes en vue de leur utilisation pratique. 

2. Administration : inclut les riches d'organisation necessaires a ^implementation de la 
gestion de contenu en utilisant TYP03. 

3. Developpement : decrit la creation d'un site Web et de son interface graphique en utili- 
sant les gabarits, ainsi que la programmation de vos propres applications dans la struc- 
ture deTYP03. 

Pour les responsables qui ne sont pas encore familiarises avec la Gestion de Contenu, et avec 
la Gestion de Contenu en Entreprise en particulier, nous proposons une introduction au debut 
de ce livre ; tout au long de I'ouvrage, nous revenons regulierement aux points importants en 
rapport avec les divers domaines des taches mises en place au sein de I'entreprise. 

Les chapitres 1 et 2 introduisent les bases theoriques de la gestion de contenu. Dans ce 
contexte, les avantages fournis par TYP03 deviennent evidents, et, a partir de la, nous eta- 
blissons des bases afin de vous permettre de prendre des decisions concernant son utilisa- 
tion strategique. Par ailleurs, ces chapitres introductifs donnent aux lecteurs depourvus de 
connaissances anterieures sur le sujet une description de celui-ci, en presentant les termes 
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et les concepts les plus importants. Cet expose est suivi du detail de Installation et de la 
configuration de TYP03. 

Dans le chapitre 3, nous faisons une demonstration du fonctionnement du systeme en nous 
servant de situations concretes de production de contenu. Un outil complexe doit prouver sa 
valeur d'une certaine facon, grace a la facilite de prise en charge de son interface. Apres avoir 
presente les options de TYP03 et leurs fonctions, la section se clot sur un exemple pratique de 
travail effectif avec TYP03. 

Le chapitre 4 couvre I'administration du systeme, puis les adaptations aux conditions et aux 
precedes definis par les producteurs dans leur travail avec le systeme. En procedant de la sorte, 
nous montrons par des exemples comment les moyens disponibles s'imbriquent, et comment 
ils sont utilises en pratique. 

Le chapitre 5 decrit la production de sites Web grace a I'util isation de TYP03. Commencant par 
I'installation, nous discutons ensuite de la programmation des gabarits avec TYP03 et passons 
en revue les differentes methodes disponibles. 

Dans les chapitres 6 et 7, nous presentons I'interface d'extension de TYP03, le Systeme Exten- 
sions, decrivant les bases et les facons de developper vos propres extensions fonctionnelles 
dans la structure de TYP03. lei, nous pouvons observer, du point de vue du developpeur, 
integration avec les fonctions du noyau et avec les differentes parties de I'architecture de 
TYP03 qui peuvent etre etendues. 

Le texte tout entier comporte des notes de bas de page et ce que nous appelons des « refe- 
rences*. Les notes de bas de page sont destinees a encourager la lecture et I'approfondis- 
sement de domaines qui ne relevent pas directement des aspects techniques de TYP03. Les 
references servent de lien entre le livre et typo3.org, ainsi que d'autres ressources. 

En saisissant le code numerique sur le site typo3.org (http://www.typo3.org/book/), vous se- 
rez amene au sujet qui y correspond sur la documentation en ligne, ou bien a des sources 
plus detaillees. De cette maniere, les references techniques et la documentation sont incluses 
et sont mises a jour autant que possible. Le lecteur a egalement I'opportunite de decouvrir 
les ressources thematiques et structurelles en ligne, qui lui donnent ainsi un certain sens de 
I'orientation dans la profusion toujours grandissante d'informations. 
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A propos de ce livre 



Ce dont vous avez besoin pour utiliser ce livre 

II vous sera necessaire d'avoir installe TYP03 sur un serveur Web sur lequel sont deployes PHP4 
et MySQL. Vous pourriez aussi avoir besoin d'options supplementaires telles que ImageMagick, 
GDLib/Freetype, zlib et un accelerateur PHP comme Zend. 

Conventions 

Dans eet ouvrage, vous trouverez divers styles de textes servant a distinguer differentes sortes 
d'informations. Voici quelques exemples, ainsi qu'une explication de leur signification. 

II existe trois styles pour les lignes de code. Les mots du code sont indiques comme suit dans 
le texte : « si nous souhaitons transformer la couleur du fond d'ecran en un joli gris, nous 
pouvons aller dans typo3_styles et personnaliser base_properties ». 

Si nous rencontrons un bloc de code, il apparaitra comme suit : 

$result = $this->query ( $query) ; 
$row = $this->fetch_array ($result) ; 

$result = $GLOBALS [ ' TYP03_DB ' ] ->sql_query ( $query ) ; 
$row = $GLOBALS [ ' TYP03_DB ' ] ->sql_f etch_assoc ( $result ) ; 

Lorsque nous voulons attirer votre attention sur une partie d'un bloc de code, les lignes en 
question seront en caractere gras : 

<body> 

<div id="rootline">rootline</div> 

<div id-" header "> 

<div id="logo">logo</div> 

<di v id= "headerimagetext " >texteimageentete< /div> 

</div> 

Les termes nouveaux et les mots importants sont presentes en italique. Les mots que vous 
voyez dans les captures d'ecran - dans les menus ou dans les boTtes de dialogue, par exemple 
- apparaissent ainsi dans le texte : « en cliquant sur la touche Suivant, vous arrivez a I'ecran 
suivant. » 

Toutes les entrees et sorties de lignes de commande sont affichees comme suit : 
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userSdomain: /srv/www> Is 
total 38 

drwxr-xr-x 6 user group 

drwxrwxr-x 14 user group 

-rw-r — r— 1 user group 

-rw-r~r— 1 user group 

-r»-r— r— 1 user group 



-al htdocs/ 

512 May 23 02:42 . 
512 Jul 24 17:51 
4987 May 23 02:42 INSTALL . txt 
608 May 23 02:42 Package.txt 
8119 May 23 02:42 README . txt 



Les commentaires des lecteurs 

Les commentaires de la part de nos lecteurs sont toujours bienvenus. Faites-nous savoir ce que 
vous pensez de ce livre, ce que vous avez aime ou ce que vous n'avez peut-etre pas aime. Les 
critiques de nos lecteurs sont importantes pour nous, dans la mesure oil nous pouvons alors 
developper les sujets les plus pertinents pour vous. 

Pour nous envoyer un commentaire general, vous pouvez simplement poster un email a- 
I'adresse typo3@eyrolles.com, en vous assurant que vous mentionnez bien le titre du livre 
et I'objet de votre message. 

Telecharger le code exemple pour le livre 

Visitez le site http://www.editions-eyrolles.com/, et tapez le code 1 1781 dans le champ Re- 
cherche pour acceder a la page du livre. Vous y trouverez des liens vers les fichiers du code 
source des exemples du livre et vers d'autres ressources. 

Les fichiers teechargeables contiennent des instructions quant a leur utilisation. 
Errata 

Bien que nous ayons pris le plus grand soin pour assurer I'exactitude du contenu du livre, des 
erreurs peuvent toujours se produire. Si vous decouvrez une erreur dans I'un de nos livres - 
cela peut etre une faute dans le texte ou dans le code - nous vous serions reconnaissants 
de nous le signaler. En agissant de la sorte, vous pouvez epargner une certaine frustration aux 
autres lecteurs, et vous nous aidez egalement a ameliorer les versions suivantes de ce livre. 

Si vous trouvez des erreurs, signalez-les par mail a I'adresse typo3@eyrolles.com. Apres les 
avoir verifies, nous ajouterons ces errata a la liste existante. Cette liste peut etre consult.ee en 
consultant la page du livre sur le site http://www.editions-eyrolles.com. 
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Ce livre est base sur la version originale allemande, dont differentes parties ont ete mises a 
jour a plusieurs reprises, a cause de changements effectues sur le noyau de TYP03 dans ses 
deux dernieres versions (3.7.0 et 3.8.0). 

Les auteurs aimeraient remercier tous leurs lecteurs pour leurs nombreux commentaires aver- 
tis, leurs conseils, et, bien sur, pour le succes considerable qu'a rencontre I'ouvrage. 

Nous voudrions aussi remercier la communaute qui nous soutient, a commencer par Kasper 
Skarh0j, les membres de I'association TYP03, ensuite toutes les personnes appartenant a des 
groupes d'utilisateurs, a des listes mail, et enfin aux prestataires de service qui nous aident. 



1.1 Hist on* que 

Kasper Skarrmj, ne en 1976, travaillait deja depuis la fin 1997 sur I'un des tout premiers 
systemes de gestion de contenu pour la jeune entreprise « Superfish » a Copenhague. Apres 
deux annees de developpement, un voyage a la conference de Seybold a San Francisco, un 
certain nombre de projets a vocation pratique, et plusieurs rencontres (avec le « gourou » 
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d'lnternet David Siege), Kasper se rendit compte que « Superfish » n'etait pas vraiment I'envi- 
ronnement adequat ou ideal pour continuer a developper TYP03. 

Ceci s'explique en partie par le fait que « Superfish » s'orientait dans une nouvelle direction 
quant au type de service fourni. De plus, il y avait une raison qui n'est que trap familiere a de 
nombreux developpeurs de logiciels : la pression des delais pour sortir de nouvelles versions en 
vue du prochain salon, et la tendance generale a donner plus d'importance aux aspects visibles 
et a negliger les aspects invisibles, qui, a long terme, sont plus importants quand il s'agit de la 
qualite. 

Les consequences que Kasper tira de cette situation ne sont pas parmi les plus habituelles : 
alors que la plupart des developpeurs d'Open Source de la premiere generation grandissaient 
dans un environnement universitaire - Linus Torvalds en etant un exemple de premier plan - 
, Kasper decida de renoncer a la securite d'une entreprise florissante, a laquelle il etait de plus 
associe, pour travailler a plein temps sur sa conception du systeme de gestion de contenu. Un 
an plus tard, s'etant consacre uniquement a la mise en ceuvre de cette conception, la version 
1 .5 fit son apparition. C'etait en j u i I let 2000. 

Le developpement de TYP03 resta un « one-man show » jusqu'en juillet 2002, avec cet avan- 
tage crucial que la qualite et la coherence de I'ensemble demeurerent a un tres haut niveau. 

II y avait un desavantage : la progression du developpement et un certain nombre d'elements 
devaient, en quelque sorte, passer « a travers le chas de I'aiguille Kasper ». Apres de nom- 
breuses discussions avec les membres de la liste mail, suivies par une phase de travail frenetique, 
Kasper publia une nouvelle version en 2002, la version 3.5b 1 , qui, avec son gestionnaire d'ex- 
tension, transforma immediatementTYP03 en un systeme modulaire. Depuis, la eommunaute 
a eontinuellement publie de nouvelles extensions, permettant d'elargir rapidement le champ 
d'application de TYP03. 

Reference 314624 Par consequent, des groupes de travail ont ete formes pour aborder tous les aspects de TYP03. 

Kasper Skarhoj est au cceur du projet et est toujours responsable de la mise en circulation. II 
travaille personnellement a la resolution d'un certain nombre de problemes. 
II ne faudrait pas oublier que son engagement depend essentiellement de la question sui- 
vante : pour lui, est-ce economiquement viable de se concentrer sur ces sujets ? C'est pourquoi 
les contributions a de grands projets commerciaux et les prestations de services effectuees a 
ces occasions, sont cruciales pour le projet TYP03 : afin qu'il continue a pouvoir payer ses 
specialistes les plus importants. 



1.2 Qu'est-ce qu'un CMS? 

Les systemes de gestion de contenu sont devenus incontournables pour creer et mettre en 
ligne du contenu sur Internet et les intranets. On appelle generalement les systemes de logiciel 
de ce domaine « Web Content Management Systems » (WCMS), ou « Content Management 
Systems* (CMS). Lorsqu'ils sont integres dans une approche globale de I'information depuis 
la gestion des documents, jusqu'a la publication sur Internet, en passant par I'impression, on 
parle de gestion professionnelle de contenu. 



24 



1.2 Qu'est-ce qu'un CMS? 



1.2.1 Separation du contenu de la forme 

Un principe de base est la separation du eontenu de la forme. En pratique, cela signifie que la 
definition de la mise en forme est sauvegardee independamment du contenu en tant que tel. 
que ce dernier soit sous forme de texte, d'images ou d'autres formats. Ce principe comporte 
de nombreux avantages quand il s'agit de changer la mise en forme, ou de la proteger contre 
des auteurs de contenu prolifiques. Mors que le contenu peut etre edite par les auteurs sans 
aucune influence sur les details de I'affichage, la definition de la mise en forme peut etre 
modifiee de facon independante, permettant done des changements effectifs d'architecture, 
meme au travers de tres grands sites Web. 



1 .2.2 Cycle de vie du contenu 

Les systemes de gestion de contenu accompagnent le contenu dans toutes les etapes de son 
cycle de vie, depuis sa creation avec les editeurs, en passant par I'organisation des ressources, 
jusqu'au deploiement en ligne lors de la publication, et enfin a I'archivage des elements de 
contenu. 




Figure 1.1: 
Cycle de vie du 
eontenu 



Durant la phase de creation, information est rassemblee et organisee globalement. Apres la 
planification, I'information pertinente est mise par ecrit, structuree quand e'est possible, et 
divisee en composants. Cette phase comprend egalement I'edition ainsi que des ameliorations 
didactiques ajoutees par les auteurs. 

L'etape d'organisation, ou de preparation, organise et sauvegarde le contenu selon un schema 
qui convient a la fois aux resultats et aux sources d'information. De plus, on definit et on 
attribue ici les droits d'utilisateurs. 

La publication a trait a la distribution et a la presentation du resultat sous la forme d'un site 
Web ou d'un produit, imprime ou sous un autre format. 

Les archives sauvegardent le contenu de maniere a se prefer au mieux aux recherches, aux 
statistiques et, au bout du compte, a la reutilisation. 
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1.2.3 Systeme modulaire 

TYP03 est un systeme modulaire organise en plusieurs couches. Depuis la sauvegarde jusqu'au 
deploiement, ces couches divisent le systeme en modules. Concernant la sauvegarde, vous dis- 
posez d'une API pour connecter TYP03 aux differentes bases de donnees. Vous pouvez aussi 
enregistrer I'information dansdesfichiersXMLen utilisant lesfonctionsde la couched'abstrac- 
tion de la base de donnees. Par ailleurs, TYP03 a defini une interface pour etendre le noyau du 
logiciel, nomme pour cette raison le systeme « d'extensions ». Ces extensions se connectent 
a TYP03 via le gestionnaire d'extensions, qui sert aussi d'environnement de developpement 
(IDE). 

Les extensions peuvent ajouter des fonctionnalites a tous les niveaux et toutes les interfaces 
du logiciel, sans en changer le noyau, et assurant done des mises a jour aisees et la stabi- 
lity du code source. Tout comme les vendeurs serieux de gestion de contenu de logiciels, les 
systemes Open Source et TYP03 en particulier, ont adopte cette approche modulaire, meme 
s'ils recourent a des concepts techniques differents, selon I'API disponible. 



1 .2.4 Groupe able 

Sur une periode relativement courte, TYP03 a pris, tres rapidement, de I'ampleur. En termes de 
quantite, le groupe d'utilisateurs le plus representatif est constitue d'entreprises de petite ou 
moyenne ta i I le. En effet, la courbe d'apprentissage et la puissance de TYP03 constituent un 
frein a son utilisation dans la sphere privee. 

Reference 027059 Les entreprises capables de s'acquitter de leur droit d'entree dans le monde de TYP03, par le 
biais des services de specialistes dument qualifies, peuvent, ce pendant, apprecier les avantages 
d'un logiciel libre en general, et de TYP03 en particulier. Les raisons les plus souvent invoquees 
comprennent la licence (GPL), la qualite, la documentation considerable, la communaute qui 
s'accroTt rapidement, et les nombreuses recommandations de la part d'entreprises et d'organi- 
sations renommees. Une selection de ces dernieres est publiee sur TYP03.com, a la reference 
ci-contre. 

Parmi les quelque 200 000 installations reprises dans le repertoire d'extensions de TYP03 entre 
juillet 2002 et le debut de 2005, on trouve un grand nombre de noms bien connus et de 
marques celebres qui ont fait confiancea TYP03, prouvant la validite des systemes Open Source 
d'entreprise en les utilisant dans leurs intranets et dans d'autres applications critiques. 

1.2.5 References TYP03 

Reference 589606 La liste des references dansTYP03.org presente une selection de projets types bases sur TYP03. 

Parmi les prestataires de services, il existe un grand nombre de noms reputes venant d'Alle- 
magne et du reste de I'Europe, mais egalement beaucoup d'entreprises de petite ou moyenne 
ta i I le, qui voient la une opportunity d'entrer en competition a un niveau technique avec de 
grands fournisseurs, proposant des prix attractifs et des delais courts pour la realisation de 
projets. 
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1.3 La communaute TYP03 



La licence GPL : « GNU General Public License » 

La licence publique generale GNU est la licence Open Source la plus largement utilisee. Ce- 
pendant, son contenu, apparemment simple, continue a provoquer des contradictions dans 
differents pays et dans differentes legislations. Une opinion legale en suit une autre et, parce 
que le logiciel est distribue gratuitement, des controverses apparaissent en ce qui concerne la 
securite du consommateur, les reglements a propos des authorisations, et les interets des pro- 
grammeurs, qui peuvent s'averer significatifs, selon le champ d'application et dans la mesure 
oil I'utilisation du logiciel se revele critique pour I'entreprise. II est done conseille de se rensei- 
gner a propos du contenu de la GPL et ses consequences legales, dans le pays ou le logiciel est 
utilise. Quand cela se revele approprie, les garanties offertes par une agence ou un prestataire 
de services techniques, qui prennent la releve ou travaillent a la mise en oeuvre, doivent etre 
reglementees. 

Les extensions revetent un role particulier. Aussi longtempsqu'elles ne fonctionnent pascomme 
des applications independantes, el les sont sujettes, el les aussi, a la GPL. 

Une fonction profondement ancree dans le code source de TYP03, qui est normalement deve- 
loppee sous la forme d'une extension, et qui n'est pas juste une adaptation ou un script base 
sur un programme existant, est Open Source, et est die aussi soumise aux conditions GPL. 

La licence GPL specifie que I'auteur n'est pas oblige de publier, mais ne peut pas non plus 
empecher la publication une fois qu'elle aura circule et sera peut-etre arrivee jusqu'a un client. 
L'auteur ne peut pas non plus opposer des restrictions aux modifications, ni a de futures mo- 
difications effectuees par des tiers, une fois qu'ils sont entres en possession du code. 

En ce qui concerne les interets economiques, des problemes peuvent surgir concernant I'utili- 
sation de TYP03, pour certains editeurs habitues a penser en termes de produits commercia- 
lement viables. 

Mais, par analogic il faut garder a I'esprit que TYP03 a ete developpe sans licence et sans cout. 

De fait, la communaute dans notre cas reagit de deux facons differentes. 

De nombreuses extensions ne sont pas publiees ; sur les cles d'extension necessaires a I'echange 
via TYP03.org, un cinquieme seulement sont des extensions publiees. Ceci n'inclut pas les nom- 
breuses extensions qui ne sont pas enregistrees, mais inclut en revanche beaucoup d'autres 
inachevees, et d'autres trop specialises pour justifier leur publication. 

II est certainement tres peu probable que des clients publient eux-memes les extensions qu'ils 
auraient obtenues d'un prestataire. 

Beaucoup de specialistes se servent de plusieurs projets pour creer et contribuer a developper 
une extension, jusqu'a ce que leur investissement en temps et en connaissancessoit remunere, 
et alors seulement ils publient leur travail, quand celui-ci est susceptible d'accroTtre leur re- 
nommee. 

1.3 La comrnunaute TYP03 

La communaute TYP03, composee d'utilisateurs et d'enthousiastes, grandit rapidement et de- 
vient de plus en plus internationale. 
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Le noyau de la communaute est represents par des listes mail — la liste mail anglaise principale 
est la liste de reference, a laquelle on peut aussi s'abonner via des newsgroups. Referez-vous a 
TYP03.org pour plus de details a propos des listes mail. 

La communaute assure un support, comme dans la plupart des projets Open Source, en of- 
frant une aide rapide et pratique, meme pour les problemes plus compliques techniquement 
parlant, tant que les regies habituelles du choix de nom des sujets ainsi qu'une formulation 
precise des questions sont respectees. II est important de lire les archives, les FAQ, et les docu- 
ments d'aide aux debutants, de facon a ne pas encombrer les listes avec des questions ayant 
deja recu de nombreuses fois une reponse, ce qui peut ennuyer les utilisateurs experiment.es. 
Souvenez-vous que I'aide que vous recevez est volontaire et gratuite, et que vous n'y avez pas 
automatiquement droit. 

Reference 139514 Si quelqu'un a besoin d'une plus grande disponibilite, de materiel pour s'exercer, ou bien a des 
questions plus complexes a poser, il peut entrer en contact avec I'un des nombreux presta- 
taires de services qu'on trouve dans la section « Consultancies* a I'adresse TYP03.com. Ces 
entreprises ont ete selectionnees d'apres la competence dont elles ont fait preuve dans leurs 
projets. 

Reference 424461 Quelqu'un qui a deja construit un savoir-faire pertinent en matiere de TYP03 souhaitera peut- 
etre se rendre utile en developpant davantage la documentation existante, ou en contribuant 
au projet d'une autre facon. Le projet vit grace a de telles contributions a tous les niveaux, 
de sorte que I'aide et le retour d'information sont reellement bienvenus, et font I'objet de 
longues discussions. Si vous desirez faire cela, il est important d'avoir une impression generale 
au prealable : quels sujets ont deja ete discut.es, et avec quels resultats. Dans ce but, nous vous 
conseillons de visiter les archives des listes mail sur TYP03.org, dans le champ Documentation 
— > Mailing-Lists. Selon le sujet, vous devrez peut-etre regarder dans les listes « Developer », 
« Marketing », ou une autre liste mail. 

Ensuite, vous devrez vous assurer qu'il n'existe pasde projet a I'objectif similaire, ou qui recoupe 
le votre. 

DansTYP03.org, dans la section Developpement — > Projets, vous trouverez une liste de tous 
les projets en cours et des secteurs de travail, avec les partenaires a contacter. 

L'une des caracteristiques de TYP03 et de la communaute est que beaucoup des partici- 
pants ont deja fait connaissance, lors de la rencontre annuelle pour la plupart d'entre eux, 
le « TYP03 ! Snowboard Tour », qui attire de plus en plus de participants chaque annee. 

En dehors des discussions, des soirees de travail intensif et des nombreuses questions qui 
trouvent une reponse, ainsi que des projets qui y sont lances, I'objectif est aussi d'apprendre a 
connaitre les personnes qui se trouvent derriere les adresses mail, et bien entendu egalement 
d'apprecier les sports d'hiver ensemble. Done, quiconque souhaite combiner I'apprentissage 
d'un savoir-faire intensif avec des vacances trouvera difficilement une meilleure opportunity 
que cet evenement. 

De par I'utilisation considerable de TYP03 dans des organisations et la tres large communaute 
d'utilisateurs, la premiere conference internationale devait bien avoir lieu un jour : ce fut Ty- 
C0N3, en septembre 2005, a Karlsruhe, en Allemagne. Pour plus d'informations, vous pouvez 
visiter le site Web suivant : 

http://tycon3.typo3.org 
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1 .4 L'association TYP03 

En novembre 2004, un groupe issu de la communaute TYP03, y compris Kasper Skarhoj et 
d'autres personnes ayant contribue au projet depuis longtemps, ont prepare et fonde une 
association appelee I'Association TYP03. Son but principal est de soutenir le developpement 
du noyau sur une base plus stable, et d'ameliorer la transparence et I'efficacite de divers aspects 
du projet TYP03. 

1.4.1 Objectifs 

■ ['organisation d'evenements au benefice de I'information et de la formation de ses membres 

■ La communication avec les membres et avec le grand public, en vue de promouvoir et 
d'accroltre la connaissance et la competence relatives a I'utilisation du logiciel TYP03, par- 
ticulierement en vertu de son projet de site Web 

■ La formation et la certification, assurant la qualite du service 

■ Favoriser le developpement de 7YP03 

■ Supporter I'adaptation des logiciels internationaux standards au sein de TYP03 

■ La representation des membres 

■ Les relations publiques et les activites qui contribuent a developper la connaissance et I'uti- 
lisation du logiciel TYP03. 

1 .4.2 Etre membre et s'inscrire 

L'Association TYP03 compte deux types de membres : 

Membres actifs 

Les membres actifs sont des personnes qui ont travaille en accord avec TYP03 et sont a la fois 
desireux et capables d'assister aux assemblies generales, ou ils ont un droit exclusif de vote et 
de decision quant au futur de I'Association. Les membres actifs sont nommes en fonction de 
leur merite, et doivent etre recommandes par deux membres actifs, ou par un cinquieme de 
I'assemblee. 



Membres de soutien 

Etre membre de soutien est possible pour tout le monde, mais requiert une inscription formelle. Reference 394945 
L'Association propose une fiche description en ligne et un moyen de paiement des droits 
d'entree en tant que membre a I'adresse http://association.typo3.org. Les membres sont soit 
des personnes, soit des entreprises, et il leur est demande de soutenir les buts et objectifs de 
I'Association, a travers leurs actions. 

Tous les membres auront le droit de se reclamer de leur qualite de membre exclusivement, et 
done de soutenir TYP03, uniquement si leur admission en tant que membres a ete acceptee. 
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Organismes et travail pratique 

['Association se compose des organismes suivants : 

Conseil (board) 

Le conseil est I'organisme executif qui assure la gestion quotidienne, les questions le- 
gales et la eomptabilite. 

Assemblee generale 

L'AG est la plus haute autorite et el it le conseil, controle le travail de ce dernier et, d'une 
facon generale, decide de toutes les questions d'importance lors de son meeting annuel. 
LAG est ouverte a tous les membres, mais seuls les membres actifs ont le droit de vote. 

Comites 

Les comites sont les groupes qui effectuent le travail en tant que tel quand il s'agit 
de discuter de I'utilisation des fonds, de la communication au sein de la communaute, 
des formations, des evenements, et ainsi de suite. Legalement, ils sont nommes par le 
conseil et TAG. Ils font des recommandations, qui sont ensuite executees par le conseil. 



30 




Installation 



Dans ce chapitre, nous abordons les differents types d'installation de TYP03 et leur champ 
d'application. Nous decrivons ensuite les etapes necessaires a leur mise en ceuvre. Si on se fie 
au nombre d'installations deja existantes, les obstacles a I'insta I lation de TYP03 ne semblent 
pas infranchissables. Toutefois, les auteurs de cet ouvrage pourraient parler des heures durant 
de leurs premiers pas en evoquant certains problemes susceptibles de derouter le debutant. 

Pour terminer, vous trouverez un apercu de quelques ressources mises a votre disposition pour 
resoudre les problemes que vous risquez de rencontrer. 

2.1 Choix du paquetage TYP03 et de la configuration du 
serveur 

TYP03 requiert simplement une base de donnees et un serveur Web configure avec PHP ; sur 
cette base, le materiel utilise, le systeme d'exploitation, le systeme de base de donnees ainsi que 
le serveur Web sont choisis en fonction d'un grand nombre de criteres, dont nous reprenons 
ici les plus importants. 



Le choix du systeme d'exploitation est determinant. TYP03 fonctionne sur la plupart des 
systemes de type UNIX, ainsi que sur Windows. II n'y a pasde difference entre ces deux versions 
en termes de fonctionnalites de base, meme si certaines extensions exigent des programmes 
UNIX. Consultez la documentation sur les extensions concernees afin de tenir compte de leurs 
restrictions. 1 

Un des avantages techniques de I'utilisation d'un systeme UNIX est la rapidite des mises a jour 
grace aux « liens symboliques ». 2 

Savoir quel systeme d'exploitation est majoritairement utilise au sein de la communaute d'uti- 
lisateurs de TYP03 est aussi un facteur important. La tendance, du moins en termes de quan- 
tity, est a I'usage des systemes Linux. Des lors, le support et, pour certaines extensions, les nou- 
veaux developpements qui dependent d'un systeme d'exploitation sont plus frequents pour 
Linux. S'il n'y a aucune contre-indication - telle qu'une infrastructure deja existante basee sur 
Windows ou votre (in-)experience - , Linux est le meilleur choix pour I'exploitation de TYP03. 

Les chapitressuivants abordent de maniere plus approfondie le choix de logiciels et de materiel 
informatique en ce qui concerne le serveur, le systeme de base de donnees, d'autres logiciels 
utiles, et finalement, le choix du paquetage de TYP03. 

2.1.1 Materiel 

Base sur PHP, TYP03 requiert au minimum un materiel informatique supportant un serveur 
Web. Meme si un vieux 286 avec 32MB de memoire vive conviendrait a cet effet, il ne constitue 
pas une plate-forme suffisamment puissante pour exploiter TYP03. Le systeme doit avoir une 
memoire vive de 51 2 MB ou plus afin de fournir les performances requises. 

Si vousdesirez utiliser votre propre serveur, considerez les facteurssuivants pour dimensionner 
votre materiel : 

Type d'utilisation 

Le facteur decisif est la maniere dont I'information disponible sur votre site Web sera utilisee : 
le site sera-t-il statique, en tout ou en partie? Desirez-vous gerer un site portail ?Voulez-vous 
creerdu contenu dynamique sur votre serveur Web ? Prevoyez-vous de mettre en ligne une ap- 
plication tellequ'une boutique, des cartes virtuellesou des forums? La regie suivante prevaut : 
au plus nombreuses sont les fonctions effectuees par le serveur, au plus eleves sont les besoins 
en materiel et les depenses pour separer le systeme en ligne du systeme de production. 

Charge du serveur 

Un certain nombre de parametres peuvent etre quantifies : 

■ Combien d'utilisateurs utiliseront le systeme simultanement ? 

■ A quelle vitesse (en secondes) une page doit-elle etre servie par le serveur ? 

1 Indexed Search, par exemple, est un puissant moteur de recherche utilise dansTYP03 necessitant un logiciel 
UNIX pour indexer les documents. II en est de meme pour plusieurs fonctionnalites de I'extension DAM et pour les 
extensions qui manipulent le format PDF. 

2 Sous Windows, installation du progiciel eomplementaire Junction permet d'utiliser les liens symboliques. Voir 
Reference 394 945. 
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■ Combien de pages par heure et par mois doivent etre delivrees ? 

■ Quel est le volume mensuel de trafic prevu, en MB ou GB ? 

II sera difficile de prendre une decision fondee si ces grandeurs ne sont pas connues. Si vous 
avez des doutes, essayez de vous informer aupres des prestataires offrant des services sem- 
blables aux votres afin d'avoir une meilleure estimation. II existe trois scenarios typiques : 

1. Charge faible a moyenne 

II s'agit ici de sites n'ayant aucune raison economique justifiant le recours a un serveur dedie. 
Pour ces sites, on ne prevoit pas plus de 10 visiteurs a la fois dans le backend et 50 dans le 
frontend, une generation de page en 1,5 secondes maximum, pas plus de 100 pages delivrees 
par heure et moins de 100 000 pages servies par mois. En tout, le trafic mensuel ne depasse 
pas 5 GB par mois. Si votre profil correspond a celui-ci sur plusieurs points, vous avez tout 
interet a selectionner un hebergeur de qualite, qui idealement propose des solutions oil TYP03 
est deja pre-installe. 

Si vous optez pour une solution ou TYP03 n'est pas encore installe, assurez-vous d'abord que 
les conditions d'installation suivantes sont remplies : 

■ au moins 100 MB d'espace disque 

■ une base de donnees MySQL 

■ PHP a partir de la version 4.3.x avec les bibliotheques GDLib et Freetype 

■ ImageMagick 

■ acces via SSH 

A ce stade, un avertissement s'impose : depuis longtemps, la location d'une infrastructure 
pour le Web ne requiert plus des montants astronomiques. Via des offres a bas prix pour des 
serveurs dedies, n'importe qui disposant de quelques euros peut mettre en place en moins 
d'un mois une offre de services en tant qu'hebergeur ou de fournisseur d'acces a Internet. La 
connaissance et la competence en la matiere ne sont pas indispensables, ce qui aboutit parfois 
a de facheuses consequences. 

Le secteur d'acces a Internet est soumis aux meme contraintes economiques que tout autre 
secteur d'activite, et de trap bas prix resultent d'un des points suivants : 

1. Une mauvaise connaissance du materiel : quelqu'un d'averti sait qu'une courte periode 
d'indisponibilite d'un serveur peut detruire le fruit d'un long travail ; 

2. Peu de frais en personnel : votre prestataire sous-traite son infrastructure chez un des grands 
fournisseurs du marche (ce qui implique peu de marge de manoeuvre pour votre prestataire) ; 

3. Taille du prestataire (un grand prestataire pourra plus facilement engager des experts). 

Bien sur, il est parfaitement justifie de rechercher I'offre la plus avantageuse. 

Seulement, avec des prix ecrases, vous ne pouvez pas vous attendre a un service optimal et a 
une protection des donnees respectant Installation et le contenu de votre CMS. 

Par prudence, pour garantir un niveau de securite minimal (ainsi qu'un fournisseur qui est 
en bonne sante financiere, redevable eontraetuellement d'indemnites en cas de probleme), 
vous devriez payer un prix acceptable, c'est-a-dire un minimum de 25 euros par mois. A ces 
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conditions, vous pouvez faire appel a des hebergeurs de plus petite tail le qui vous offrent un 
service fiable et personnalise. 

Independamment du budget de votre projet, exigez toujours une sauvegarde automatique, 
faites-en un prealable lors de la selection d'un prestataire. 

2. Charge moyenne a elevee et Intranet 

II est judicieux d'avoir votre propre serveur si votre application CMS en justifie Installation 
et I'exploitation. Dans ce cas, le cout de la location du serveur ou de la co-location devient 
marginal par rapport aux autres couts du projet. 

Plusieurs etudes ont demontre qu'une proportion de 35% des couts eta it consacree a I'achat 
ou la location d'un serveur contre 65% pour la maintenance et les autres couts associes. 
Pour I'intranet, vous n'avez pas d'autre choix que d'avoir votre propre serveur. La question 
centrale est ici eel le du dimensionnement. Avant toute decision, il est fortement conseille de 
proceder a une evaluation des besoins, en tenant aussi compte de leur evolution (la mainte- 
nance de deux serveurs ne represente pas plus de 10% de travail supplementaire que pour un 
seul serveur). 

La formule la plus repandue pour le calcul des couts sur la duree de vie d'un investissement, 
appele cout total de propriete ou encore Total Cost of Ownership, en anglais (TCO), peutetre 
par exemple presentee comme suit : 

L' « iceberg » du TCO 

Couts appa rents 

+ investissement 

+ achat de logiciels et de materiel 
+ installation 
+ mise en oeuvre 

Couts caches 

+ adoption du syteme 

+ support 

+ administration 

+ formation 

+ maintenance 

+ degre de non-utilisation 



= cout total de propriete 

Ce mode de calcul s'est considerablement affine au cours du temps 3 , mais pour un exemple 
ou pour une premiere evaluation des couts d'une operation, la liste reprise ci-dessus suffit. 

3 cf. Bensberg/Dewanto : « TCO VOFI for eLearning Platforms », http://www.campussource.de/org/opensource/ 
docs/bensbergVor.doc.pdf 
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Si, en fonction de votre calcul, vous optez pour un serveur dedie, il est essentiel de clarifier les 
points techniques suivants : les performances du materiel, les possibilities de le mettre a jour, 
la disponibilite de pieces de rechange, la strategic de sauvegarde ainsi que la securite (droits 
d'acces, etc.). 

3. Charge elevee 

Pour une charge elevee, c.-a-d. plusd'un million de pages servies par mois, la solution standard 
est de combiner plusieurs serveurs en cluster. La motivation de ce choix est de repartir la 
charge ainsi que d'assurer une redondance du systeme. Suivant le role qu'on lui assigne, la 
charge maximale a laquelle fait face le serveur peut etre depassee meme avec un trafic peu 
eleve. De plus, certaines conditions d'utilisation de I'application -par exemple dans un systeme 
informatique de gestion- ne tolerent aucune interruption. Les serveurs Web et les serveurs de 
base de donnees peuventaussi etre administres et dimensionnesseparement, en fonction de la 
charge qu'ils ont a supporter. Divers scenarios existent, allant de systemes de 10 serveurs Web 
Apache, installes chacun avec leur propre materiel et un serveur MySQL, jusqu'a des systemes 
composes de 3 serveurs Apache et de 5 serveurs MySQL. 

Dans tous les cas, il est ici question de solutions specifiques qui necessitent une planification 
et une implementation precises, ainsi qu'un suivi constant. 

2.1.2 Serveur Web 

En theorie, TYP03 pourrait etre exploite avec Apache, IIS ou tout autre serveur utilisant PHP. La Reference 504537 
combinaison la plus utilisee, en termes de quantite, est la combinaison Apache-PHP. La version 
de PHP et sa configuration ont une influence surTYP03 ; ce phenomene est decrit a la rubrique 
« Server Compatibility » sur le site TYP03.org (cf. reference). 

2.1 .3 Base de donnees 

La base de donnees standard pour TYP03 est MySQL. El le est restee longtemps la seule base de 
donnees supportee. Depuis lors, une couche d'abstraction de base de donnees (DBAL 4 ) a ete 
introduite. Comme cette couche utilise un langage SQL compatible avec MySQL au lieu d'un 
metalangage, MySQL reste la solution la plus performante, puisque dans ce cas, les requetes 
vers la base de donnees ne doivent pas etre transformees. De plus, plusieurs extensions utilisent 
leurs propres requetes. Des verifications sont done necessaires au cas par cas si Ton veut faire 
fonctionner une extension avec d'autres bases de donnees pour s'assurer que le code gerant 
les requetes reste compatible. 

Choisir un systeme SGBDR (Systeme de Gestion de Bases de Donnees Relationnelles) autre 
que MySQL est une decision qui doit etre prise avec precaution ; au bout du compte, les couts 
d'installations et de mises a jour deviendront, a long terme, superieurs a ceux d'une installation 
standard. 

Une variante interessante de I'utilisation d'autres bases de donnees est de combiner differentes 
bases de donnees, afin de conserver les donnees specifiques sur votre propre systeme de base 
de donnees et de les rendre disponibles pour une application specifique utilisee dans TYP03. 

4 DBAL est I'abreviation de Database Abstraction Layer. 
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L'integration directe de donnees a partir d'autres systemes de bases de donnees est alors ren- 
due possible, evitant du meme coup les desavantages de la replication et de la synchronisation 
de donnees. L'abstraction de base de donnees n'est pas reservee qu'aux systemes S6BDR : les 
fichiers plats tels que les donnees XML peuvent aussi etre interroges via des requetes SQL. 

Reference 613803 Nous n'envisageons ici que la situation standard avec MySQL, I'information sur d'autres sce- 
narios n'etant pas encore disponible. Toutefois, la documentation sur I' 'abstraction de base de 
donnees (DBAL) fournit quelques indications (cf. reference). 

2. 1 .4 Autres logiciels 

Deux bibliotheques sont necessaires a TYP03 pour la manipulation d'images. Ces logiciels uti- 
litaires sont entierement optionnels ; TYP03 fonctionne aussi sans traitement d'images et sans 
ces bibliotheques. La premiere bibliotheque est GDLibrary, une extension PHP, qui peut etre 
completee par Freetype, une extension offrant des fonctions pour representer des polices de 
earactere. Puisque GDLibrary est deja compris dans une installation PHP standard, nous ne 
nous y attarderons pas ici. 

Reference 353034 La seconde bibliotheque, utilisee principalement pour le redimensionnement et la creation 
des fichiers image en pre-visualisation, est ImageMagick. L'utilisation d'une ancienne version 
(version 4.2.9) est recommandee pour TYP03, cette derniere presentant des avantages par 
rapport aux versions plus recentes. 5 

TYP03 peut etre utilise avec les dernieres versions de ImageMagick si les inconvenients pour 
les fonctions de masquage, de contour et de lissage n'affectent pas votre site Web. 

Reference 436028 La version recommandee (4.2.9) est disponible sur le site de TYP03.org sous la reference in- 
diquee ci-contre. Vous pouvez vous procurer la derniere version d'lmageMagick soit par le 
gestionnaire de paquetage de votre distribution Linux, soit en le telechargeant a partir du site 
d'lmageMagick 6 

Vous pouvez aussi utiliser GraphicsMagic, une bibliotheque basee sur le projet ImageMagick, 
qui entend maintenir le developpement de I'API dans une ligne plus stricte. 7 

2.1.5 Choix du paquetage TYP03 

TYP03 existe en plusieurs paquetages, selon I'usage auquel on le destine. Leur format depend 
du systeme d'exploitation : 

Tous les paquetages UNIX sont des archives de type tar 8 etse terminent par I'extension .tar.gz. 
Les paquetages Windows sont des archives de type zip, et se terminent par I'extension .zip. 

II n'y a aucune difference reelle entre les fichiers contenus dans les deux types d'archive. La 
seule difference est la taille du paquetage. Le paquetage tar.gz occupe moins d'espace disque 

5 Nous n'avons pas reeu de reponse satisfaisante lorsque nous avons interroge I'equipe de developpement d'lma- 
geMagick, concernant la baisse de qualite dans certains domaines. L'eehange d'emails reprenant les desavantages de 
chaque version d'lmageMagick est disponible a la reference citee plus haut. 

6 http://www.imagemagick.com/ 

7 http://www.graphicsmagick.org/ : 1'evolution inconstante du developpement de I'API d'lmageMagick a pousse 
plusieurs developpeursa se passer de cette bibliotheque. TYP03 s'est adaptea ce comportement capricieuxen ajoutant 
des options de configuration pour tenir compte des pa rticula rites de chaque version d'lmageMagick. 

8 Une archive tar est le nom donne aux archives creees a I'aide du programme tar (qui est en general aussi 
comprime avec gzip). Ce format accepte les liens symboliques. 
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que le paquetage .zip ear les liens symboliques evitent de dedoubler certains dossiers. Le pa- 
quetage .zip contient ees dossiers en double exemplaire, comme le montre la capture d'ecran. 





— 



Figure 2.1: 
a gauche : liens 
symboliques et leur 
relation vers les 
fichiers du repertoire 
src; a droite : liens 
symboliques vers les 
repertoires sources d 
I'interieur du 
repertoire src 



Des raisons historiques expliquent le double usage des repertoires (a I'aide de liens symbo- 
liques). Notez que les liens symboliques ne peuvent pas etre crees via un acces FTP. Si votre 
acces au serveur Web est limite a FTP, selectionnez un paquetage zip. 

Depuis peu, a I'aide de logiciels utilitaires tels que Junction , il est aussi possible de creer des Reference 394945 
liens dans le systeme de fichiers d'une partition NTFS de Windows. 

Les differents paquetages comprennent toujours la version la plus recente de TYP03 ; ils ne 
different que par les exemples qu'ils contiennent. En general, les paquetages tar.gz ne con- 
tiennent pas le code source de TYP03, repris dans le fichier typo3_src suivi du numero de la 
version, qui doit etre telecharge separement. Par contre, tous les paquetages zip contiennent 
le code source. 

Les principaux paquetages TYP03 sont les suivants : 



QuickStart 

Cette version est prevue pour les neophytes et comprend le didacticiel du debutant. Vous Reference 995697 
devriez selectionner ce paquetage si vous voulez suivre le didacticiel car il contient tout le 
materiel et les donnees pour les exemples. II est aussi disponible sous la reference ci-contre. 



Test Site 

Le paquetage Test Site contient des exemples de gabarits TypoScript, differents types de menus 
et des extensions telles qu'une boutique, un annuaire et des actualites. Ce paquetage, bien qu'il 
soit un peu depasse, est utile si vous souhaitez tester ou decouvrir le systeme par vous-meme 
a I'aide d'exemples. 
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Dummy 

Le paquetage Dummy differe des paquetages Quickstart et Test Site par sa base de donnees 
vide et par I'absence d'exemples. II sert de paquetage standard pour les developpeurs qui com- 
mencent un nouveau projet en partant de rien. 

La copie de la base de donnees contient un eompte d'administrateur, auquel on a acces avec 
le nom d'utilisateur admin et le login password. 

TYP03 Source 

Le paquetage TYP03 source est une archive de type tar qui contient tous les repertoires 
necessairesau fonctionnementdu systeme de base. Les paquetages zip contiennent par defaut 
ce paquetage. 

Les liens symboliques permettent d'operer plusieurs installations TYP03 (sites Web) a partir 
d'une source unique. Les extensions peuvent etre stockees dans le repertoire global d'exten- 
sions typo3/ext/ ou dans le repertoire typo3conf/ext/ propre a une instance de site Web. 

2.2 Installation de test et d'initiation 

Reference 056013 TYP03.org offre toute une gamme de paquetages adapt.es aux differents systemes d'exploi- 
tation. Nous approfondissons ici les deux distributions classiques : le programme d'installa- 
tion WAMP (Windows Apache MySQL PHP) concu pour Windows par Ingmar Schlecht, et le 
paquetage Quickstart pour Linux. II existe d'autres paquetages et guides d'installation pour 
BigApache, Mac OS X, Debian, Gentoo, Mandrake, etc. En jetant un ceil sur la section « down- 
load » et sur la matrice de documentation du site TYP03.org, vous trouverez de nouvelles idees 
pour I'util isation de votre installation. 

2.2.1 Installation WAMP sous Windows 

Vous trouverez le programme d'installation WAMP parmi les paquetages sur la page de tele- 
chargement de TYP03.org. II est tres simple d'utilisation : 

1. Teleehargez le programme sur votre ordinateur. 

2. Ouvrez le fichier par un double-clic. 

3. Apres un court laps de temps, une boTte de dialogue s'affiche pour vous demander d'ac- 
cepter la licence GPL. E I le constitue une licence relativement courte, que vous pouvez 
lire si vous desirez connaTtre vos droits. Si vous ne I'acceptez pas, vous etes temporaire- 
ment arrive a la fin de votre carriere TYP03 : il n'existe pas d'autre licence pour TYP03, 
et vous devez absolument adherer a ses conditions si vous ne voulez pas en perdre le 
droit d'utilisation. 

4. Un message apparaitra ensuite pour vous informer que le programme ecrira tous les fi- 
chiers dans le repertoire C:\apache. Acceptez seulement si vous n'avez pas de repertoire 
preexistant portant ce nom, ou si vous souhaitez effacer toutes les donnees qu'il con- 
tient. En effet, toutes les donnees preeedemment sauvegardees dans ce dossier seront 
irremediablement perdues. 

5. L'installation est terminee. 



38 



2.2 Installation de test et d'inrtiation 



Une nouvelle entree TYP03 se trouve maintenant dans votre menu demarrer avec les options 
suivantes : 

Start Apache 

Lance le serveur Web Apache 

Start MySQL 

Lance le serveur de base de donnees MySQL 

Stop MySQL 

Arrete le serveur de base de donnees MySQL 
TYP03 start Servers before 

Appelle le frontend de TYP03 dans une fenetre de votre navigateur a I'adresse http://lo- 
calhost 

TYP03 (Alternative URL) 

appelle TYP03 a I'adresse http://l 27.0.0.1 

Si vous lancez Apache et MySQL et appelez la page de demarrage TYP03, vous trouverez toute 
I'information au sujet du frontend et du backend. Le programme d'installation WAMP s'est 
alors deja charge de toutes les autres operations d'installation, etTYP03 est pret pour les tests, 
ainsi que pour vos propres essais de programmation. 

2.2.2 Installation Quick Install sous Linux 

Si vous avez un serveur Web disponible qui supporte MySQL et PHP, vous installerez tres fa- 
cilement TYP03 sur Linux ou sur d'autres systemes d'exploitation de la famille UNIX tels que 
BSD, OS X, etc. 

Si vous avez un acces SSH au serveur, connectez-vous et telechargez I'archive de Quickinstall Reference 056012 
a partir du site TYP03.org a I'aide de curl ou wget Les adresses sont reprises sur la page de 
telechargement de TYP03.org. 

Si vous n'avez qu'un acces FTP sur votre serveur Web, utilisez le paquetage zip. Transferez tous 
les fichiers sur le serveur dans le repertoire source de votre site Web (ils sont souvent appeles 
.../htdocs/, .../html/ ou .../www/). 

Vous donnez maintenant des droits d'acces en ecriture sur certaines parties de TYP03. Si vous 
accedez au serveur uniquement en FTP, vous devrez proceder autrement. Plusieurs serveurs 
Web ont des interfaces pour I'edition de fichiers tels que Cpanel, Confixx ou Webmin. En cas 
de doute, contactez votre administrateur ou votre fournisseur. 

Les droits d'acces des fichiers suivants doivent etre modifies comme indique ci-apres : 

chmod 777 typo3/temp/ 
chmod 777 typo3/ext/ 
chmod 777 typo3temp/ 
chmod 777 typo3con£/ 
chmod 777 typo3con£/ext/ 
chmod 777 uploads/ 
chmod 777 fileadmin/ 

Attention : en etendant ainsi les droits d'ecriture a I'ensemble des utilisateurs, la securite de 
votre systeme peutetre mise en danger par quiconque ayant acces a votre serveur. Vous pouvez 
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consulter la section 2.3.1 pour plus d'informations sur la maniere de securiser votre environ- 
nement. 

AppelezTYP03 a I'adresse http ://www. votredomain.com/index.php de votre serveur Web. 

Si vous n'avez pas de fichier index.html dans le repertoire de votre serveur Web, vous ne devez 
pas entrer index.php a la fin de I'URL Sinon, nous vous suggerons de renommer index.html 
en index_alt.html. Vous pourrez bien sur I'effacer a partir du moment ou vous n'en avez plus 
besoin. 

Avant de basculer dans le mode « 1 -2-3 » de I'outil d'installation, un message d'avertissement 
s'affiche, vous demandant de modifier immediatement le mot de passe de I'outil d'installation. 

Entrez un nom d'utilisateur et un mot de passe pour la base de donnees MySQL et soumettez 
le formulaire. Ensuite, vous pourrez creer une nouvelle base de donnees, ou en selectionner 
une preexistante. Dans ce dernier cas, n'oubliez pas que toutes les donnees qu'elle contient 
seront ecrasees ! 

Chargez le fichier quickinstall.sql dans la base de donnees. Vous pouvez maintenant vous 
connecter au backend avec le nom d'utilisateur admin et le mot de passe password a I'adresse 
http://www.votredomaine.com/typo3.Vous pouvez acceder a I'outil d'installation avec le log- 
in joh316. 9 Veillez a changer le mot de passe de I'outil d'installation des votre premiere 
connexion ! 

[.'installation de base est maintenant terminee. 



2.3 L'installation en production 

['installation en production se caracterise principalement par I'util isation d'un paquetage ne 
contenant que la source (sans exemples), et occupant de ce fait un espace disque minimum. 
De plus, I'outil d'installation contient un grand nombre d'options supplementaires qui ne sont 
pas incluses dans le mode simplifie d'installation. C'est un point essentiel, non seulement pour 
optimiser la configuration du systeme, mais aussi pour avoir un apercu de la structure de 
TYP03. 



2.3.1 Installation LAMP 

En plus d'etre le systeme d'exploitation le plus utilise pour les serveurs Web, UNIX/Linux est 
ideal pour [utilisation de TYP03. La plate-forme Linux est tres avantageuse, particulierement 
en ce qui concerne les mises a jour ; par ailleurs, il existe plusieurs logiciels utilitaires, indispen- 
sables a certains modules additionnels de TYP03, qui ne sont disponibles que sous Linux. C'est 
pourquoi il est recommande de lire la documentation en ligne a propos des extensions avant 
de les installer. Par la suite, nous envisageons une installation standard avec MySQL. 

9 Pour les curieux : Kasper Skarhoj fait ici reference au verset de I'evangeliste Jean : « Car Dieu a tant aime le 
monde qu'il a donne son Fils unique : ainsi tout homme qui croit en lui ne perira pas, mais il obtiendra la vie eternelle ». 



2.3 L'installation en production 



En fonction des distributions Linux, des differences pourraient apparaTtre entre installation 
avee Apache/PHP et avec MySQL. ImageMagick est necessaire au traitement et au dimen- 
sionnement des images. Vous pouvez aussi utiliser GraphicsMagick, une autre bibliotheque de 
manipulation d'images developpee sur la base d'lmageMagick (voir page 36). Consultez la do- 
cumentation de votre systeme ou le gestionnaire de paquetage approprie. Dans tous les cas, 
PHP doit avoir au moins 1 6 MB de memoire (voir le fichier php.ini) et permettre le chargement 
de fichiers de grande ta il le (configure dans php.ini et Apache). 

Pour installer TYP03, vous avez d'abord besoin d'une base de donnees MySQL vide avec son 
nom d'utilisateur et son mot de passe, ainsi qu'un des paquetages decrits plus haut, disponibles 
sur le site TYP03.org. 

Vous telechargez ensuite la source et le paquetage dummy, qui contient des liens symboliques 
et un repertoire de configuration, ce qui vous evitera de saisir quelques lignes de commandes. 

Votre navigateur est la meilleure facon d'ouvrir la page de telechargement du paquetage qui 
vous interesse. Ouvrez en meme temps une application de commande (p.ex. Bash, Term, Putty) 
et connectez-vous au serveur Web via SSH : 

~$ ssh user@domain.com 

Passez au repertoire de votre serveur Web, situe un niveau au-dessus du repertoire du site 
Web : 

user@domain:~> cd /srv/www 

Telechargez la version actuelle des paquetages dummy et source. L'adresse correcte et le nom Reference 05601 1 
du dossier sont indiques a la page de paquetages sur le site TYP03.org (cf. reference) : 

user@domain: /srv/www> wget \ 

> http: //typo3 . sunsite .dk/unix-archives/3 . 8 . 0 /dummy /dummy -3 .8.0. tar . gz 

et 

user&domain : /srv/www> wget \ 

> http: //typo3 . sunsite .dk/unix-archives/3 . 8 . 0 /dummy /dummy -3 .8.0. tar .gz 

lei, srv/www est le repertoire dans lequel se trouve la racine du serveur Web (dans notre 
exemple htdocs/). Consultez, si necessaire, le fichier de configuration de votre serveur Web 
afin de trouver le bon chemin. 

Apres avoir telecharge I'archive dans le repertoire /srv/www, desarchivez-la a I'aide des com- 
mandes : 

user@domain: /srv/www> tar xzf typo3_src-3 . 8 . 0 . tar . gz 

et 

user@domain: /srv/www > tar xzf dummy-3 . 8 . 0 . tar . gz 

Ensuite, deplacez les dossiers dans le repertoire dummy-3. 8.0 a I'aide de la commande : 

user@domain: /srv/www> mv dummy-3 . 8 . 0/* htdocs/ 
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vers le repertoire htdocs, ou le repertoire qui contiendra votre site Web. 
Vous pouvez maintenant effacer les archives et le dossier vide. 

user@domain: /srv/www> rm -r dummy- 3 . 8 . 0 
userSdomain: /srv/www> rm dummy- 3 . 8 . 0 . tar .gz 

Ensuite, si vous listez le contenu du repertoire htdocs avec la commande : 

user@domain: /srv/www> Is -al htdocs/ 

vous devriez obtenir le resultat suivant : 

total 38 



drwxr-xr-x 


6 


user 


group 


512 


May 


23 


02 


: 42 




drwxrwxr-x 


14 


user 


group 


512 


Jul 


24 


17 


:51 




-rw-r--r~- 


1 


user 


group 


4987 


May 


23 


02 


:42 


INSTALL . txt 


-rw-r--r-- 


1 


user 


group 


608 


May 


23 


02 


:42 


Package . txt 


-rw-r— r— 


1 


user 


group 


8119 


May 


23 


02 


:42 


README . txt 


-rw-r--r-- 


1 


user 


group 


434 


May 


23 


02 


:42 


RELEASE_NOTES . txt 


-rw-r — r— 


1 


user 


group 


4509 


May 


23 


02 


:41 


_ . htaccess 


-rw-r — r— 


1 


user 


group 


46 


May 


23 


02 


:41 


clear . gif 


drwxr-xr-x 


4 


user 


group 


512 


May 


23 


02 


:41 


f ileadmin 


lrwxr-xr-x 


1 


user 


group 


18 


Jul 


24 


17 


:51 


index. php -> tslib/ index_ts .php 


lrwxr-xr-x 


1 


user 


group 


11 


Jul 


24 


17 


:51 


media -> tslib/media 


lrwxr-xr-x 


1 


user 


group 


17 


Jul 


24 


17 


:51 


showpic.php -> tslib/showpic .php 


lrwxr-xr-x 


1 


user 


group 


15 


Jul 


24 


17 


:51 


t31ib -> typo3_src/t31ib 


lrwxr-xr-x 


1 


user 


group 


15 


Jul 


24 


17 


:51 


tslib -> typo3_src/tslib 


lrwxr-xr-x 


1 


user 


group 


15 


Jul 


24 


17 


:51 


typo3 -> typo3_src/typo3 


lrwxr-xr-x 


1 


user 


group 


18 


Jul 


24 


17 


:51 


typo3_src -> . . / typo3_src-3 . 8 . 0 


drwxr-xr-x 


3 


user 


group 


512 


May 


23 


02 


:41 


typo3conf 


drwxr-xr-x 


2 


user 


group 


512 


May 


23 


02 


:41 


typo3 temp 


drwxr-xr-x 


6 


user 


group 


512 


May 


23 


02 


:41 


uploads 



Executez les commandessuivantes afin de permettre au serveur Web d'acceder en ecriture aux 
repertoires suivants : 

chmod 777 typo3/temp 
chmod 777 typo3/ext 
chmod 777 typo3temp 
chmod 777 typo3conf 
chmod 777 typo3conf /ext 
chmod 777 uploads 
chmod 777 fileadmin 

Donner les permissions 777 n'est pas sans risque, puisque cela donne tous les droits a I'en- 
semble des utilisateurs du serveur. II serait preferable d'ajuster les permissions a 770, si le 
proprietaire des repertoires peut etre le Webmaster et si le groupe peut etre celui sous lequel 
le serveur Web opere. Mais cela depend des options d'administration et des permissions qui 
vous ont ete accordees; dans tous les cas, les permissions 777 fonctionnent. Ensuite, faites 
sauter la securite de I'outil d'installation en ouvrant le fichier suivant dans un editeur (dans 
notre exemple vi, qui est disponible sur la plupart des plate-formes Linux). 



2.3 L'installation en production 



user@domain: /srv/www> vi typo3/install/index.php 

Au debut, changez la ligne suivante : 

die ("In the main source distribution of TYP03 , the 
install script is disabled by a die ( ) function 
call . <BR>Open the file typo3/install/index.php 
and remove/out-comment the line that outputs this 
message ! " ) ; 

Si vous utilisez vi (ou vim), tapez dd suivi de ZZ. Vous avez maintenant efface la ligne, sauve- 
garde le fichier et quitte vi. II est aussi possible de commenter la ligne en ajoutant // si plus 
tard vous souhaitez reactiver le verrouillage pour des raisons de securite. II faut alors entrer i 
pour aceeder au mode d'insertion. Tapez // au debut de la ligne, quittez le mode d'insertion en 
appuyant sur(EsF), et entrez :wq! afin de sauvegarder vos changements et fermer I'editeur. 

Dans un navigateur, vous pouvez maintenant appeler I'outil d'installation, decrit au chapitre 
2.4 a I'adresse : 

http : / /www . votr edomaine . com/ typo3 / install / 

2.3.2 Installation WAMP 

installation Windows de TYP03 neeessite un systeme WAMP operationnel et un serveur 
Apache avec les distributions les plus recentes de PHP et MySQL. Des programmes d'installation 
sont disponibles aux adresses URL http://www.php.net/ ou http://www.bigapache.org/. 

Apres avoir installe Apache, MySQL et PHP, vous pouvez installer ImageMagick. II s'agit aussi Reference 892286 
d'un logiciel libre ;voustrouvereza la reference ci-contre une version correspondante d'lmage- 
Magick adaptee a I'utilisation de TYP03. L'installation neeessite des executables si vous voulez 
eviter de compiler le logiciel par vous-meme. 

Installez ImageMagick sur votre ordinateur avant de reprendre l'installation de TYP03. 

Telechargez le paquetage dummy se trouvant dans la distribution zip de la page de telecharge- 
ment de TYP03.org. Desarchivez le zip dans le repertoire source de votre site Web. II s'agit 
generalement du repertoire suivant : 

C:\Program Files\apache\htdocs\ 

Au cours de la prochaine etape, I'utilisateur sous lequel Apache opere aura besoin des droits 
de lecture et d'ecriture sur les repertoires suivants : 

typo3\temp\ 

typo3\ext\ 

typo3temp\ 

typo3conf \ 

typo3conf \ext\ 

uploads\ 

f ileadmin\ 

Dans le dossier typo3\install\index.php, la ligne : 

die ("In the main source distribution of TYP03 , the install script is dis 
abled by a die ( ) function call . <BR>Open the file typo3/install/index.php 
and remove/out-comment the line that outputs this message!") ; 
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doit etre effacee ou commentee par I'insertion de // en debut de ligne. 
Ensuite, passez a la section sur I'outil d'installation. 

2.3.3 Installation WHS 

['installation WHS (Windows Installation Information Server) comporte sept etapes : 

1. Preparation du systeme 

II est fortement recommande de creer une partition separee pour le serveur Web, afin 
d'eviter que les droits d'acees que vous devez configurer n'influencent pas les droits sur 
votre partition du systeme, ce qui mettrait votre systeme en danger. 

2. Installation de MySQL 

Telechargez la derniere version de MySQL sur le site http://www.mysql.com, desarchivez 
le dossier d'installation et suivez les instructions. Lorsque Installation est terminee, une 
fenetre Windows s'ouvrira avec le programme WinMySQLadmin, dans laquelle vous 
pouvez definir les utilisateurs et les bases de donnees. Creez une base de donnees vide 
et un compte utilisateur pour cette base de donnees. 

3. Installation d'lmageMagick (optionnel) 

Reference 892286 ImageMagick est aussi un logiciel libre ; vous trouverez a la reference ci-contre une 

version correspondante d'lmageMagick adaptee a [utilisation de TYP03. [installation 
necessite des executables si vous voulez eviter de compiler le logiciel par vous-meme. 

4. Installation de PHP 

Apres [installation de PHP, vous devez verifier certains parametres dans le fichier php.ini 
et les ajuster si necessaire. Le fichier php.ini contient les parametres de configuration 
PHP. Le parametre le plus important pour le fonctionnement de TYP03 est : 

memory_l imi t- 8M 



II devrait etre augmente a 16M (16 MB) minimum. L'outil d'installation verifie quelques 
autres parametres, mais ils sont en general deja initialises correctement dans la confi- 
guration par defaut. 

5. Configuration IIS 

La configuration IIS ne contient pas de donnees speciales en ce qui concerneTYP03 ; les 
reglages peuvent etre soit pris en charge automatiquement par le programme d'instal- 
lation PHP, soit ajust.es manuellement, comme le decrit le guide d'installation de PHP. 
Pour des questions de performance, il est conseille d'operer PHP en mode ISAPI. 

6. Desarchivez TYP03 

Desarchivez le paquetage ZIP selectionne dans le repertoire cible, generalement appele 
F:\inetpub\wwwroot\. Le nom de disque peut bien sur varier. 

7. Assignation de droits d'acees NTFS 

Finalement, des droits doivent etre donnes aux deux utilisateurs sous lesquels IIS est 
execute. Ces utilisateurs sont denommes IUSR et IWAM suivis du nom de leur serveur. 
L'utilisateur IUSR_NOMDEMACHINE a besoin de droits de lecture sur tout le systeme 
de fichiers, afin d'executer les fonctions PHP file_exists(), is_file(), etc., et pas seule- 
ment pour les repertoires sous lesquels TYP03 est installe. Cet utilisateur doit aussi 
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2.4 L'outil d'installation 



avoir des droits de lecture et d'ecriture sur le programme cmd.exe afin d'utiliser Image- 
Magick la oil il est necessaire, ainsi que le droit de lecture sur le fichier php.ini. Dans le 
repertoire du serveur Web, les permissions suivantes doivent etre allouees a I'utilisateur 
IUSR_NOMDEMACHINE : 



TYP03 



Droit 



Repertoire de serveur Web (generalement: 

Drive :\inetpub\wwwroot\) 

fileadmin\ 

typo3temp\ 

uploads\ 

typo3ext\ 

typo3conf\ 

C:\PHP\uploadtemp\ 

ImageMagick 

C:\WINDOWS\system32\cmd.exe 



Lire 

Ecrire (repertoire et sous-repertoires) 
Ecrire (repertoire et sous-repertoires) 
Ecrire (repertoire et sous-repertoires) 
Ecrire (repertoire et sous-repertoires) 
Ecrire (repertoire et sous-repertoires) 
Ecrire 

Lire et executer 
Lire et executer 



Tableau 2.1: 
Droits de 

IUSR_NOMDEMACHINE 



2.4 L'outil d 'installation 

L'outil d'installation consiste essentiellement en une interface graphique qui permet d'editer la 
configuration de TYP03, sauvegardee dans le fichier localconf.php du repertoire typo3conf/. 
Le serveur Web doit done avoir les droits d'ecriture sur ce fichier et sur tout le repertoire 
typo3conf. 

Essayons de comprendre le fonctionnement du systeme de configuration. A I'exeeution, TYP03 
cree des fichiers tampon dans le repertoire typo3conf qui reprennent les parametres de confi- 
guration. Ainsi, lorsque vous modifiez la configuration, ces fichiers tampon doivent etre sup- 
primes pour que les changements deviennent effectifs. La suppression se fait normalement 
automatiquement, sauf en cas de changement de version de code source de TYP03, princi- 
palement vers une version inferieure ; vous devez alors supprimer manuellement les fichiers 
tampon. Ces fichiers ont des noms tels que temp_CACHED_ps2268_ext_localconf.php. 

En ajoutant /typo3/install/ au nom de votre domaine, vous appelez l'outil d'installation : 
http://www.votredomaine.com/typo3/install/. 

Pour utiliser l'outil d'installation, il faut supprimer une fonction de verrouillage du script 
typo3/install/index.php, ce qui a deja ete decrit dans la section sur les installations LAMP 
etWAMP. 

Le mot de passe par defaut pour l'outil d'installation est joh316; vous devriez le changer 
immediatement apres votre premiere identification. Ensuite, vous demarrez I'insta Nation en 
saisissant les informations suivantes : 
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1. nom d'utilisateur, mot de passe, nom d'hote (loealhost) et, si necessaire, le nom d'une 
base de donnees deja creee que TYP03 devrait utiliser ; 

2. le chemin menant ail repertoire dans lequel est installe ImageMagiek ; avec la eom- 
mande 



~$ locate identify 



vous le decouvrirez rapidement sur la plupart des distributions Linux. 

L'outil d'insta Nation est divise en plusieurs sections dont les trois premieres doivent etre mo- 
difies jusqu'a un certain point lors de Installation. Les autres sections servent a la mainte- 
nance du systeme. 

2.4.1 Basic Configuration 

L'onglet de configuration de base verifie les droits d'acces aux repertoires dans lesquels TYP03 
doit pouvoir ecrire, et verifie egalement la configuration PHP dans le fichier php.ini. Tous les 
problemes pouvant empecher I'insta I lation sont indiques ici avec les avertissements corres- 
pondants. 



Figure 2.2: 
Configuration 
correcte pour laquelle 
TYP03 a les droits en 
eeriture sur les 
repertoires de travail 



Directories: 




ty po3conf/ wrlteable 
, typo3conf/cxt/ wrlteable 
,. typo3/ext/ wrlteable 





,/" uploads/ media/ wrltea 



ds/tf/ wrlteable 
. , tileadmin/ wrlteable 
^f| te -d m .n/_,. m p_/wrlteab te 




Vous devez aussi specifier I'acces a votre base de donnees. Apres avoir entre le nom d'utilisa- 
teur, le mot de passe et le nom d'hote (generalement « loealhost » si MySQL est installe sur 
votre serveur), vous soumettez le formulaire en cliquant sur update configuration soit pour 
selectionner une base de donnees existante, soit pour en creer une nouvelle si vous en avez les 
droits (create). 



Figure 2.3: 
Aeees a la base de 
donnees 



Host: 



bt3 entre prise 



motdepasse 



loealhost 
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Nous poursuivons en passant en revue la configuration pour la creation d'images. Si vous avez 
installe ImageMagick, specifiez ici le chemin d'acces. TYP03 recherche automatiquement Ima- 
geMagick dans le repertoire par defaut et determine par ailleurs si vous avez compile GDLib 
avec Freetype lors de I'insta I lation PHP. Dans les versions recentes de Freetype, le texte dans 
I'image de test peut eventuellement deborder du cadre. Si ce probleme persiste, nous le corri- 
gerons lors d'une etape ulterieure (cf. section 2.4.4). 



^/ FrceType Quick-test (as GIF) 



Testing Truetype support 



Figure 2.4: 
Resultat du test 
Freetype avec 
resolution correcte 



Lorsque vous soumettez le formulaire, I'outil d'installation sauvegarde toutes les valeurs des 
parametres de configuration dans le fichier localconf.php. 



2.4.2 Database Analyzer 

Le script de I'analyse de base de donnees vous permet aussi bien d'editer et de mettre a jour 
une base de donnees existante que d'en creer une nouvelle en specifiant sa structure et son 
contenu. Une definition minimale de base de donnees est incluse dans le paquetage dummy. 
Le fichier SQL correspondant est dans le repertoire « » typo3conf/ et est affiche automati- 
quement dans I'outil d'installation. 



COMPARE 



IMPORT 



typo3conf/database.sql (1.2 M) COMPARE IMPORT VIEW 
Compare with $TCA 
"admin" user 
iser preferences 



Figure 2.5: 
Affichage du fichier 
SQL par defaut 
specifiant la structure 
et le contenu de la 
base de donnees 



Avec I'option Import, vous importez la base de donnees. Apres avoir clique sur cette option, un 
message s'affiche, vous demandant de confirmer I'importation de toutes les donnees. Cochez 
I'option et soumettez le formulaire en cliquant sur Write to database. 

Figure 2.6: 

E Import the whole file 'database.sql' directly (Ignores selections above): Import de la base de 

J donnees 



Cette operation peut prendre du temps selon les performances de votre serveur Web. A I'etape 
suivante, vous verrez une liste de toutes les tables de base de donnees aecompagnees d'un 
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avertissement indiquant qu'elles existent deja. Si ce n'est pas le cas, c'est-a-dire que certaines 
tables sont indiquees eomme inexistantes, cela signifie que le processus d'import a echoue ; 
vous devriez done reessayer. ^initialisation de la base de donnees est a present terminee. Un 
eompte administrateur est des lors ouvert avec admin comme nom d'utilisateur et password 
eomme mot de passe. 



Figure 2.7: 
Le message du 
Database Analyzer 
apres un import 
reussi du fichier SQL 
(attention : d'autres 
tables peuvent 
s'afficher en fonction 
de voire installation ! 



Import SQL dump: 

\j Select tables to import 

This is an overview of the CREATE TABLE definitions in the SQL file. 
Select which tables you want to dump to the database. Any table you 
choose dump to the database is dropped from the database first, so 
you'll loose all data in existing tables. 
I | be_groups 



I I be_sessions 

□ be_u 5 e„ 

| | cache_hash 

| | cache_imagesizes 

| | ca|he_mdSparams 

| | cache_pages 

Q cache _pagesection 

I | cache_typo3temp_log 

I | fe gi-oups 

I | fe_session_data 

nfe_** M ion s 

□ 

I I pages_language_overlay 
I | static_template 

□ = ta be tsc or, hq help 
I | sys be shortcuts 

I I sys_domain 
I | sys_filemounts 

□ sysjiistory 

□ sysjanguage 

I | sysjockedrecords 

□ sysjog 

I | sys_note 

I I sys_notepad 

I | sys_template 

□ tt_content 



<^ Table exists! 
Table exists! 
Rows: 1 ^ Table exists! 

Table exists! 
<t> Table exists! 
<■> Table exists! 
<^ Table exists! 

Table exists! 
<t> Table exists! 
<P Table exists! 

Table exists! 
<§> Table exists! 
<^ Table exists! 
<fo Table exists! 
Table exists! 
Rows: 61 Table exists! 

Rows: 203 <J> Table exists! 

<1> Table exists! 
<^Table exists! 
<^Table exists! 

Table exists! 
<t> Table exists! 
<P Table exists! 

Table exists! 
<t> Table exists! 
<^ Table exists! 
<J> Table exists! 
<f> Table exists! 



Pour initialiser la base de donnees, vous pouvez utiliser une methode alternative qui ne reclame 
pas I'emploi du fichier database.sql du paquetage dummy - choisissez dans ce cas I'option 
COMPARE. Une liste de toutes les tables de base de donnees requises est indiquee. Celles-ci 
ont ete preselectionnees. Appuyez sur le bouton de confirmation dans le formulaire pour creer 
les tables de base de donnees. Choisissez ensuite la fonction Create admin user et ouvrez un 
eompte administrateur. 
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2.4 L'outrl d'installatron 



2.4.3 Image Processing 

Ce script teste I'installation des bibliotheques de traitement d'images ImageMagick, de GDLib 
et Freetype. Nous n'en discutons pas en detail ici car il n'a pas d'influence sur la configuration 
de votre systeme. 

2.4.4 All Configuration 

Le script All Configuration contient des champs de saisie pour toutes les options de confi- 
guration de TYP03 ainsi que quelques breves explications de ces options dont les noms sont 
les cles du tableau PHP TYP03_CONF_VARS. En general, seules quelques entrees sont impor- 
tantes. Si le texte du test Freetype introduit preeedemment depasse du cadre, augmentez la 
resolution dans Freetype de 72 a 96 dpi. 

Entrez cette valeur dans le champ [GFX] [TTFdpi] ; vous le trouverez dans la partie finale de la 
section [GFX], juste avant la section [SYS]. 

Les autres entrees sont normalement optionnelles a ce stade. 

2.4.5 typo3temp/ 

Cette section vous donne un ensemble de statistiques sur les fichiers enregistres dans le 
repertoire typo3temp, et vous permet aussi de les supprimer. Cette fonction est importante 
pour la maintenance de I'installation. Le repertoire est utilise par TYP03 pour enregistrer les 
fichiers d'images du frontend. Ces images sont regenerees chaque fois que le cache de la page 
est supprime, tandis que les anciennes restent dans ce dossier. Pour les sites Web de grande 
envergure contenant une grande quantite d'images, plusieurs MBs peuvent rapidement s'y ac- 
cumuler. Si les images sont supprimees de ce repertoire, bien que les pages pointent toujours 
vers les fichiers, I'image est regeneree pour autant que vous vidiez le cache de la page apres 
avoir supprime les fichiers. Vous pouvez egalement aller voir dans le backend de votre installa- 
tion TYP03, dans le module Outils — > Verification BD sous Relations, pour savoir combien 
de fichiers sans lien avec la base de donnees se trouvent dans ce repertoire. 

2.4.6 phpinfoO 

Cette section appelle la fonction PHP par defaut phpinfoO et affiche tous les parametres 
essentiels de I'installation PHP. Vous trouverez tout au-dessus un resume des parametres les 
plus importants du systeme TYP03, resume que vous devriez inserer dans votre email en cas 
de question a la liste Install, de telle maniere qu'une information complete soit fournie pour le 
debogage . 

2.4.7 Edit files in typo3conf/ 

Cette section reprend la liste des fichiers situes dans le repertoire typo3conf/. Vous pouvez 
editer chacun de ces fichiers ; cliquez simplement sur le nom du fichier pour lancer le formu- 
laire d'edition. Cette option peut s'averer tres utile pour les utilisateurs de TYP03 experimentes, 
car elle permet d'inserer manuellement les valeurs de configuration, par exemple si I'un des 
scripts d'insta Nation a echoue. Vous avez la possibility de convertir tous les sauts a la ligne du 
format Windows au format Linux et de creer automatiquement une copie de sauvegarde du 
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fichier que vous editez. Cette derniere fonction est hautement recommandee pour les essais 
de configuration dans le fichier localconf.php, afin que vous puissiez facilement restaurer la 
configuration precedente. 

2.4.8 About 

Vous connaissez deja cette section : c'est la premiere page que vous apercevez lorsque le 
programme demarre. El le vous permet de modifier le mot de passe de I'outil d'installation. Si 
vous ne I'avez pas encore fait, changez-le maintenant. 

2.5 Options de configuration dans TYP03_CONF_VARS 

A cote de la configuration de base, un grand nombre de parametres sont controles par le script 
All Configuration. En voici la liste exhaustive, accompagnee pour chaque parametre d'une 
description qui est parfois reprise dans I'outil d'installation sous une forme abregee. 

2.5.1 [GFX]:$TYP03_CONF_VARS["GFX"] 

La zone GFX (pour « Graphics*) contient toutes les options de configuration pour le trai- 
tement d'images en TYP03. IM est une abreviation pour ImageMagick et GD designe la bi- 
bliotheque GD. 

[image_processing] 

Booleen (0,1). Active ou desactive le traitement d'images en TYP03. 

Exemple : [image_processing] = 1 
[thumbnails] 

Booleen (0,1). Affiche (ou non) les vignettes (images miniatures) dans le backend. 
Exemple : [thumbnails] = 1 
[thumbnails_png] 

Bits. Bit 0 : I'entree 0 cree des vignettes en format GIF, I'entree 1 en format PNG. Bit 1 : 
I'entree 2 specifie que chaque fichier JPG est converti pour I'affichage de sa vignette en 
GIF ou en PNG avec I'entree 3. 
Exemple : [thumbnails_png] = 0 
[nolconProc] 

Booleen (0,1). Lorsque I'option est activee (1), les icones ne sont pas construites dyna- 
miquement dans le backend a partir de couches (par exemple, pour combiner I'icone de 
la page avec les icones Lancement, Arret ou Cacher la page) mais doivent etre dispo- 
nibles sur le serveur. Cela peut etre utile pour obtenir un backend operationnel, meme si 
les operations de combinaison ne sont pas correctement supportees par le logiciel Ima- 
geMagick. Cette option devrait uniquement etre desactivee si le serveur fournit toutes 
les fonctionnalites pour le traitement des images. 
Exemple : [nolconProc] = 1 
[gif_compress] 

Booleen (0,1). Cette option active la fonction t3lib_div::gif_compress() qui recomprime 
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les fichiers GIF generes s'ils ne sont pas comprimes ou s'ils utilisent seulement la com- 
pression RLE [Run Length Encoding). Mow [im_path_lzw]. 

Exemple : [gif_com press] = 1 
[imagefile_ext] 

Vous specifiez ici une liste d'extensions de fichiers (separees par des virgules) qui de- 
vraient etre interpret.es comme des images par TYP03. Lorsque IM n'est pas disponible, 
la liste doit etre restreinte aux extensions gif.pngjpegjpg, ecrites en minuscules et sans 
espace. 

Exemple : [imagefile_ext] = gifjpgjpeg.tif.bmp.pcx.tga.png.pdf.ai 

[gdlib] 

Booleen (0,1). Cette option permet I'utilisation de la bibliotheque GD parTYP03. 
Exemple : [gdlib] = 1 

[gdlib_png] 

Booleen (0,1). Entrer 1 signifie que GD generera uniquement des fichiers PNG plutot 
que des fichiers GIF. Cependant, les vieux navigateurs n'affichent pas les fichiers PNG. 
Et meme les versions recentes de TIE ne supportent pas toutes les fonctionnalites PNG 
comme, par exemple, les transparences. 
Exemple : [gdlib_png] = 0 

[gdlib_2] 

Booleen (0,1). Vous devriez entrer la valeur 1 si votre serveur Web utilise GDLib 2.0.1 ou 
plus, sans quoi certains problemes pourraient survenir. 

Exemple : [gdlib_2] = 0 

[im] 

Booleen (0,1). Permet I'utilisation d'lmageMagick (IM) par TYP03. 
Exemple : [im] = 1 
[im_path] 

Entrez ici le chemin menantau dossier dans lequel les programmes IM convert, combine 
et identify sont situes sur le serveur Web. 
Exemple : [im_path] = /usr/local/bin/ 

[im_path_lzw] 

Entrez les details du chemin pour la version IM dont la commande convert peut im- 
plementer la compression LZW. Cette compression a ete brevetee par Unisys et fut sup- 
portee temporairement par ImageMagiek. La version recommandee 4.2.9 d'lM peut etre 
equipee avec la compression LZW ; dans ce cas le champ est laisse vide et [gif_compress] 
est desactive. On peut attendre des versions futures de plusieurs logiciels qu'elles sup- 
portent la compression LZW, etant donne que le brevet a expire. 

Exemple : [im_path_lzw] = /usr/local/typo3sh/bin/ 
[im_version_5] 

Booleen (0,1). Mettez cette valeur a 1 si vous utilisez une version d'lM 5.x ou plus. 
Exemple : [im_version_5] = 0 
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[im_negate_mask] 

Booleen (0,1). A partir de la version 5.1, les images doivent etre inserees avant d'etre 
combinees avec un masque. 
Exemple : [im_negate_mask] = 0 
[irnJmvMaskState] 

Booleen (0,1). Depuis la version 5.4.3+, la situation decrite dans le paragraphe precedent 
a ete inversee et TYP03 peut etre configure de telle maniere que le reglage global 
[im_version_5] ne demande pas la conversion des fichiers d'image qui doivent etre 
masques, ce qui eta it necessaire auparavant. 10 
Exemple : [irnJmvMaskState] = 0 
[im_no_effects] 

Booleen (0,1). Avec la version 4.2.9 reeommandee, les effets d' ImageMagick fonc- 
tionnent bien. Dans les versions plus recentes, ils sont devenus plus lents, et peuvent 
etre desactives a I'aide de ce parametre. Enfin, dans les versions d'lM les plus recentes, 
les effets fonctionnent bien mieux mais la syntaxe de I'API a une nouvelle fois ete mo- 
difiee-sans commentaires ... 
Exemple : [im_no_effects] = 0 
[im_v5effects] 

Entier (-1,0,1). 0 = desactive. -1 = ne pas rendre les contours des images plus nets par 
defaut. 1 =Tous ; la definition des contours (sharpening) et le flou (blurring) sont actives 
et I'option [im_no_effects] est annulee. 
Exemple : [im_v5effects] = 0 

[im_mask_temp_ext_gif] 

Booleen (0,1). Activez cette option si vous utilisez une version d'lM 5+. La classe par 
defaut tslib_cObj utilise le format PNG car la generation est plus rapide et demande 
moins de CPU. Etant donne que certaines versions d'lM au-dela de la version 5 ne sup- 
portent pas le format PNG correctement, cela peut etre supprime en activant cette 
option. 

Exemple : [im_mask_temp_ext_gif] = 0 

[im_mask_temp_ext_noloss] 

ChaTne de caracteres. Pendant que les images sont masquees, il faut bien entendu enre- 
gistrer les fichiers temporaires dans un format sans perte. Pour ce faire, le format miff 
d'lmageMagick est ideal. Malheureusement, la version 5.4.9 d'lmageMagick n'est pas 
capable de generer son propre format de fichier. Dans ce cas, en cas de probleme avec 
les masques, vous pouvez utiliser au choix les formats TIF, PNG, or JPG. 
Exemple : [im_mask_temp_ext_noloss] = miff 

[im_noScaleUp] 

Booleen (0,1). Les images ne sont pas agrandies lorsque I'option est activee. 
Exemple : [im_noScaleUp] = 0 

10 Ceci a mene, de pair avec beaueoup d'autres developpements, a la separation du projet GraphiesMagic afin de 
ereer une interface plus fiable. Le commentaire de Kasper Skarhoj a ce moment venait clairement du cceur : « Alleluia 
pour ImageMagick - ai-je un jour regrette d'utiliser ce paquetage ...» 
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[im_combine_filename] 

Chame de caracteres. Les versions d'lM les plus reeentes ont renomme la commande 
combine en composite ; donnez ici le nom correct. 
Exemple : [im_combine_filename] = combine 

[im_noFramePrepended] 

Booleen (0,1). Certains formats d'image comme GIF ou TIF permettent de sauver plu- 
sieurs images dans un seul fichier. ImageMagick fournit une option pour travailler uni- 
quement avec la premiere image, ce qui accroTt generalement la vitesse de travail. Mal- 
heureusement, quelques versions d'lM contiennent une erreur impliquant qu'lM ignore 
tout bonnement ces images. Le cas echeant, cette option doit etre activee. 
Exemple : [im_noFramePrepended] = 0 

[enable_typo3temp_db_tracking] 

Booleen(0,l). Vous specifiez ici si tous les fichiers dans typo3temp/ doivent etre enre- 
gistres dans une table de la base de donnees. Ceci empeche les images d'etre creees si- 
multanement par deux processus differents, puisque la relation entre le fichier de sortie 
temporaire et le fichier source est notee ici. En outre, le module Outils — > Verification 
BD du backend et I'outil d'installation vous renseigne sur le nombre de vieux fichiers se 
trouvant dans le repertoire temp/. 
Exemple : [enable_typo3temp_db_tracking] = 0 

[TTFLocaleConv] 

Chaine de caracteres. Vous pouviez specifier ici, jusqu'a la version 3.6.0, le format de 
sortie des fonctions TrueType. Depuis la version 3.6.0, la sortie est toujours de type UTF- 
8. 

Exemple : [TTFLocaleConv] = 
[TTFdpi] 

Entier. Cette option importante permet de regler la resolution en dpi (pixels par pouce) 
dans laquelle fonctionne le systeme Freetype sur votre serveur. Cette resolution est de 
96 dpi depuis la version 2 pour 72 avant ; I'affichage des polices est alors trop grand si 
la valeur n'est pas changee a 96 dpi pour les versions plus reeentes. 
Exemple : [TTFdpi] = 96 

[im_jpg_quality] 

Entier. Cette valeur determine la qualite du format JPEG. 
Exemple : [im_jpg_quality] = 70 

2.5.2 [SYS]:$TYP03_C0NF_VARS["SYS n ] 

Cette section decrit les options de configuration des interfaces backend et frontend. 
[textfile_ext] 

Indiquez ici, via les extensions de fichiers, quels types de fichiers peuvent etre edites 
dans le backend. 

Exemple : [textfile_ext] = txt,html,htm,css,inc,php,php3,tmpl,js,sql 
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[contentTable] 

Cette option vous permet de specifier le nom de la table des elements de contenu de la 
page. La valeur par defaut est tt_content. 

Exemple : [contentTable] = tt_content 
[sitename] 

II s'agit du nom de I'insta Nation qui est montre au sommet de I'arbre de la page, a cote 
de I'icone representant le globe terrestre. Le nom est aussi disponible dans la section 
Basic Configuration de I'outil d'installation. 

Exemple : [sitename] = BT3-Entreprise 
[ddmmyy] 

Le format d'affichage de la date - correspond a la notation de la fonction date() en 
PHP. 

Exemple : [ddmmyy] = d.m.y 
[hhmm] 

Le format d'affichage de I'heure - correspond a la notation de la fonction date() en 
PHP. 

Exemple : [hhmm] = H:i 
[encryptionKey] 

Cette option permet de specifier une chame de caracteres aleatoire utilisee dans la 
creation de valeurs de hachage pour le chiffrement dans le menu contextuel, le Direct 
Mail Module, ainsi qu'a d'autres endroits dans le systeme ; cela permet d'ameliorer la 
securite. 

Exemple : [encryptionKey] = Haaken Flip 
[doNotCheckReferer] 

Booleen (0,1). Cette option permet de desactiver le eontrole actif dans le backend, qui 
verifie que I'hote accedant et I'hote referent (referring host) sont bien identiques. Si 
la valeur est mise a 1, la verification n'est plus active. Cela peut etre utile lorsque 
I'acces se fait via des serveurs proxy qui ne donnent pas une valeur correcte a la va- 
riable HTTP_REFERER. 

Exemple : [doNotCheckReferer] = 0 

[recursiveDomainSearch] 

Booleen (0,1). Lorsque cette option est activee (1), si Ton essaie d'acceder a un domaine 
non-existant, TYP03 efface recursivement des parties du nom jusqu'au moment oil il 
trouve une correspondance avec un nom de domaine configure dansTYP03. 

Exemple : [recursiveDomainSearch] = 0 



[T3instlD] 

Cette option n'a pas encore ete utilisee. L'intention etait de creer une identite unique 
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a laquelle chaque installation peut s'identifier lorsqu'elle accede au repertoire d'exten- 
sions. Cela servirait a des fins statistiques, mais n'a pas encore ete mis en pratique. 

Exemple : [T3instlD] = N/A 
[devlPmask] 

Indiquez les adresses IP separees par des virgules. Cette option importante definit la 
liste des adresses IP pour lesquelles les messages d'erreur sont affiches dans le frontend. 
La fonction DebugO utilise ces entrees comme filtre. Une entree vide ne permet aucun 
acces. Le caractere * donne acces a tous les hotes. Ce meme caractere (*) permet de 
donner I'acces a plusieurs adresses IP ayant certains chiffres en commun. Par exemple, 
192.1 68.*.* donne I'acces a toutes les adresses IP eommencant par 192.1 68.. 

Exemple : [devlPmask] = 1 92.1 68.*,1 27.0.0.1 
[curlUse] 

Booleen (0,1). En entrant 1, la fonction getUrl utilisee par le systeme est curl au lieu 
de fopenfj, de telle maniere que vous puissiez travailler avec des serveurs proxy (ce qui 
n'est pas possible avec fopen()). La bibliotheque Curl est certainement disponible dans 
votre installation PHP. 

Exemple : [SYS] [curl Use] = 0 
[curlProxyServer] 

URL. Vous devez donner I'adresse de votre serveur proxy a Curl sous la forme http://pro- 
xy:port/. 

Exemple : [curlProxyServer] = http://l92.168.L1 :8080 
[curlProxyTunnel] 

Booleen (0,1). Pour des raisons de securite, il est necessaire d'etablir un tunnel a travers 
le serveur proxy. Entrez 1 et Curl s'en chargera. 

Exemple : [curlProxyTunnel] = 0 
[curlProxyUserPass] 

ChaTne de caracteres. Vous entrez vos nom d'utilisateur et mot de passe pour I'acces au 
serveur proxy, si necessaire, en utilisant la notation Nom d'utilisateur:Mot de passe. 

Exemple : [curlProxyUserPass] = Leeloo:Multipass 
[form_enctype] 

Chaine de caracteres. Cette option permet d'ajuster globalement le type de chiffrement 
de la plupart des formulaires dansTYP03. multipart/form-data est I'option par defaut ; 
die permet de charger les fichiers. Si le chargement de fichiers n'est pas permis par 
votre installation PHP, les donnees creees avec ce formulaire ne seront pas transferees. 
Le type de chiffrement peut etre change en consequence par la valeur application/x- 
www-form-urlencoded. 

Exemple : [form_enctype] = multipart/form-data 
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[loginCopyrightWarrantyProvider] 

Chame de caracteres. GPL n'inclut aucune garantie de la part de I'auteur du logiciel. Si 
vous desirez ou devez assumer la garantie de la fonction envers un client, vous pouvez 
entrer votre nom dans ee champ de sorte qu'il soit affiche sur la page d'ouverture de 
session. Une adresse Internet (URL) est aussi donnee a I'etape suivante. 

Exemple : [loginCopyrightWarrantyProvider] = VEB Optimismus 

[loginCopyrightWarrantyURL] 

Chame de caracteres. Specifiez une adresse URL de la forme http://www.votredomaine. 
com ; el le servira de lien aux noms donnes dans I'option precedente. 

Exemple : [loginCopyrightWarrantyURL] = http://www.veb-optimismus.de 

[loginCopyrightShowVersion] 

Booleen (0,1). La page d'ouverture de session indiquera la version TYP03 si vous entrez 
la valeur 1. 

Exemple : [loginCopyrightShowVersion] = 0 
[binPath] 

Chame de caracteres sous forme de liste separee par des virgules. Vous entrez une liste 
de chemins absolus dans lesquels la recherche de programmes externes est faite. Ceci 
est par exemple utilise par les services de I'extension DAM. 

Exemple : [binPath] = /usr/bin/ 

[t3lib_cs_convMethod] 

Chame de caracteres. Dans la classe t3lib_cs, entrer I'une des valeurs suivantes specifie 
avec quel outil les jeux de caracteres sont convertis : iconv ou recode sont des pro- 
grammes externes; I'argument par defaut est le code PHP propre a TYP03. Les pro- 
grammes externes sont significativement plus rapides mais I'encodage HTML de ca- 
racteres speciaux n'est pas supporte. 

Exemple : [t3lib_cs_convMethod] = recode 
[t3lib_cs_utils] 

Chaine de caracteres. Au lieu d'utiliser le code propre a TYP03 pour convertir les jeux 
de caracteres, vous pourriez vouloir utiliser le module PHP mbstring qui est bien plus 
rapide. Pour ce faire, il vous suffit d'entrer le nom de ce module en argument. La chaine 
mbstring est d'ailleurs la seule qu'accepte cette option comme argument, contrairement 
a ce qui est indique dans la description anglaise de I'outil d'installation. Si vous n'entrez 
rien, le code propre a TYP03 sera utilise. 

Exemple : [t3lib_cs_utils] = mbstring 
[enable_DLOG] 

Booleen. Indique si le log « developpeur » est active. Voir la constante TYP03_DL0G. 
Exemple : [enable_DLOG] = 
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[no_pconnect] 

Booleen. La valeur 1 force I'utilisation de connect a la base de donnees a la place de 
pconnect. 

Exemple : [no_pconnect] = 1 
[multiplyDBfieldSize] 

Valeur decimale comprise entre 1 et 5. Indique un facteur par lequel sera multipliee 
la taille de chaque champ lorsque I'outil d'installation calcule la taille de la base de 
donnees (p.ex.2,5). C'est utile lorsque vous voulez augmenter la taille des champs pour 
utf-8. Pour des sites de I'Europe de I'Ouest utilisant utf-8, on ne devrait pas avoir une 
valeur superieure a deux fois la taille normale d'un octet simple et pour les langues 
asiatiques, un facteur 3 devrait suffire. 

Exemple : [multiplyDBfieldSize] =1 
[setMemoryLimit] 

Entier. Indique la valeur du parametre PHP memory_limit en MB : si el le est superieure 
a 16, TYP03 essaie d'utiliser ini_set() pour fixer la limite memoire de PHP a cette valeur. 
Cette operation n'a de sens que si votre sysadmin vous a donne les droits d'utiliser la 
fonction ini_set(). 

Exemple : [setMemoryLimit] = 0 
[forceReturnPath] 

Booleen. Force I'utilisation du chemin de retour (return path) dans la fonction mail(). 
Si cette valeur est active, tous les appels a mail() par la classe t3lib_htmlmail seront 
faits avec -f comme cinquieme parametre. Cela rendra le chemin de retour correct sur 
la plupart des systemes UNIX. II y a un probleme avec les versions inferieures a 2 pour 
Postfix : les emails ne sont pas envoyes si cette valeur est activee. Sur les plate-formes 
Windows, le chemin de retour est donne via un appel a ini_set. Cela n'a pas d'effet si 
PHP est installe en safe.mode. 

Exemple : [forceReturnPath] = 0 
[displayErrors] 

Entier, -1,0,1. 0=N'afficher aucun message d'erreur PHP. 1=Afficher les messages d'er- 
reur. -1=Valeur par defaut qui permet de remplacer le parametre display_errors. II est 
conseille de fixe la valeur de ce parametre a 0 et d'activer a la place I'option errorjog 
dans php.ini. 

Exemple : [displayErrors] = 1 
[serverTimeZone] 

Entier. Specifie le decalage en heures par rapport a I'heure GMT. La valeur par defaut 
est 1 qui correspond a I'heure 6MT+1 (Europe centrale). Cette valeur peut etre utilisee 
dans les extensions qui doivent convertir des heures a partir ou vers d'autres fuseaux 
horaires. 

Exemple : [serverTimeZone] = 1 
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2.5.3 [EXT]:$TYP03_C0NF_VARS["EXT"] 

Nous decrivons dans cette section differentes options pour configurer le gestionnaire d'exten- 
sions et les parties du systeme s'y rapportant. 

[noEdit] 

Booleen (0,1). La valeur 1 empeehe les fichiers dans le gestionnaire d'extensions d'etre 
edites. Pour les developpeurs, la valeur devrait etre mise a 0 afin qu'ils puissent y ap- 
porter directement les changements. 

Exemple : [noEdit] = 1 
[allowGloballnstall] 

Booleen (0,1). La valeur 1 permet I'insta Nation des extensions globales dans le repertoire 
typo3/ext/ via le gestionnaire d'extensions, ainsi que leur mise a jour et leur suppression 
dans ce repertoire. Cette option est importante pour que les administrateurs ne puissent 
pas modifier les extensions globales au cas oil plusieurs sites Web sont installes sur le 
serveur. 

Exemple : [allowGloballnstall] = 0 
[allowLocallnstall] 

Booleen (0,1). La valeur 1 permet d'administrer les extensions locales dans le repertoire 
typo3conf/ext/ de I'instance en question via le gestionnaire d'extensions. 

Exemple : [allowLocallnstall] = 1 
[em_devVerUpdate] 

Booleen (0,1). La valeur 1 provoque un marquage rouge des versions des extensions si 
des mises a jour sont disponibles. 

Exemple : [em_devVerUpdate] = 0 

[em_alwaysGetOOManual] 

Booleen (0,1). Vous demandez, en entrant la valeur 1, que la documentation incluse 
dans les extensions, disponible en format OpenOffice, soit toujours telechargee depuis 
le serveur. 

Exemple : [em_alwaysGetOOManual] = 0 
[em_system Install] 

Booleen (0,1). Vous permettez au gestionnaire d'extensions d'installer les extensions du 
repertoire sysext/ en entrant la valeur 1. C'est necessaire pour realiser les mises a jour 
des extensions des systemes cms et lang a partir du gestionnaire d'extensions. 

Exemple : [em_system Install] = 0 
[required Ext] 

Chame de caracteres sous forme de liste separee par des virgules. Vous specifiez les 
extensions qui ne peuvent etre desactivees par le Gestionnaire d'Extensions (GE). Nor- 
malement, les extensions cms et lang qui forment le cceur du systeme sont incluses 
dans la liste. 

Exemple : [requiredExt] = cms.lang 
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[extCache] 

Entier (0,1,2,3). Pour ne pas enregistrer les scripts d'extensions extjocal-conf.php et 
ext_tables.php dans le cache, entrez 0. Les scripts seront alors lus chaque fois a chaque 
requete de la page -ce qui est interessant lorsque vous developpez les extensions, 
puisque cela vous permet de ne pas devoir supprimer le cache dans le backend. 

L'argument par defaut est 1. Les scripts sont sauves dans des fichiers sous la forme 
typo3conf/temp_CACHED_[sitePathHash]*, ce qui reduit la charge du serveur et aug- 
mente ses performances -un reglage utile pour un serveur en production. 

La valeur 2 fait en sorte que le nom de fichier du fichier tampon contienne une valeur 
de hachage basee sur la chaine de caracteres [extList]. La valeur 3 signifie que les noms 
des fichiers tampon ne contiendront aucune valeur de hachage. 

Exemple : [extCache] = 1 
[extList] 

ChaTne de caracteres sous forme de liste separee par des virgules. Les extensions ins- 
tallees par le gestionnaire d'extensions sont entrees dans cette liste. Si vous installez 
une extension defectueuse qui rend impossible le travail avec le systeme, editez le fi- 
chier typo3conf/localconf.php pour enlever cette extension et effacer la cle de cette 
liste. En outre, les fichiers typo3conf/temp_CACHED_* doivent etre supprimes pour que 
le systeme soit a nouveau operationnel. 

Exemple : [extList] = tsconfig_help,context_help,extra_page_cm_options I ... 

2.5.4 [BE]:$TYP03_C0NF_VARS["BE"] 

Cette section presente les parametres de la configuration backend. 

[unzip_path] 

Indiquez le chemin menant au programme de decompression unzip. 
Exemple : [unzip_path] = /usr/bin/ 

[diff_path] 

Indiquez le chemin vers I'application diff en ligne de commande, utilisee pour comparer 
les fichiers. Une version Windows de diff peut se telecharger a I'adresse : 
http://unxutils.sourceforge.net/ 

Exemple : [diff_path] = diff 
[fileadminDir] 

Le chemin du repertoire fileadmin ; chemin relatif par rapport au chemin du site specific 
par la constante PATH_site. 

Exemple : [fileadminDir] = fileadmin/ 

[RTE_imageStorageDir] 

Le chemin vers le repertoire dans lequel seront sauves les fichiers du Rich Text Editor. 

Exemple : [RTE_imageStorageDir] = uploads/ 
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[staticFileEditPath] 

Le chemin vers le repertoire dans lequel sont enregistres et edites les fichiers « sta- 
tiques ». Les champs de la base de donnees peuvent etre configures dans le $TCA de 
telle sorte qu'ils sont en realite stockes dans un fichier. L'extension sys_staticfile_edit 
en est une application. 

Exemple : [staticFileEditPath] = fi lead m in/static/ 
[lockRootPath] 

Chaine de caracteres. Speeifie la partie commune des chemins [userHomePath] et 
[groupHomePath]. Notez que la premiere partie des chemins [userHomePath] et 
[groupHomePath] doit correspondre a [lockRootPath]. Cette valeur est aussi utilisee 
pour acceder a un repertoire en dehors des valeurs PATH_site. Par exemple, on change 
cette valeur si un traitement sur des donnees doit etre autorise a un niveau au-dessus 
du repertoire racine du serveur Web. 

Exemple : [lockRootPath] = /srv/www/archiv/ 
[userHomePath] 

Chaine de caracteres. Chemin vers le repertoire personnel de I'utilisateur backend. Si la 
valeur du chemin est inseree ici, TYP03 cree automatiquement un repertoire person- 
nel pour chaque utilisateur. Par exemple, si la valeur est /home/typo3/users, alors un 
repertoire avec le chemin /home/typo3/users/43_cameronfrye/ est cree pour I'utilisa- 
teur 43_cameronfrye avec I'uid 43. 

Exemple : [userHomePath] = /srv/www/htdocs/typo3/users/ 
[groupHomePath] 

Chaine de caracteres. Comme pour les utilisateurs, un repertoire separe est cree auto- 
matiquement pour chaque groupe. 

Exemple : [groupHomePath] = /srv/www/htdocs/typo3/group/ 
[userUploadDir] 

Chaine de caracteres. Un suffixe preconfigurable ajoute aux repertoires de I'utilisateur. 
Si le repertoire de I'utilisateur correspond au nom d'utilisateur et a I'uid, c'est-a-dire 
ici 43_cameronfrye/ et que la valeur specifiee est /250GT, alors un repertoire nomme 
43_cameronfrye/250GT/ est mis a disposition de I'utilisateur. 

Exemple : [userUploadDir] = /250GT 
[fileCreateMask] 

Definissez ici les permissions d'acces donnees aux fichiers crees par TYP03 dans le 
systeme de fichiers, en accord avec la syntaxe de la commande umask de UNIX. 

Exemple : [fileCreateMask] = 0644 

[folderCreateMask] 

Le meme reglage que le precedent, mais cette fois pour les dossiers. 

Exemple : [folderCreateMask] = 0755 
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[warning_email_addr] 

Une adresse email a laquelle est envoye un avertissement lorsque quatre tentatives 
manquees d'ouverture de session au backend se sont produites en une heure. 

Exemple : [warning_email_addr] = ronald@evilempire.com 
[warning_mode] 

Entier (1,2). Si vous entrez 1, un message est envoye a I'adresse donnee precedemment 
ehaque fois qu'un utilisateur a ouvert une session au backend. Si vous entrez 2, I'adresse 
recoit un avertissement uniquement lorsqu'un administrateur ouvre une session. 

Exemple : [warning_mode] = 2 
[IpmaskList] 

Chame de caracteres. Specifiez les adresses IP auxquelles vous octroyez exclusivement 
un acces au backend. Les utilisateurs ayant d'autres adresses IP n'auront done aucun 
acces. II est possible d'utiliser * comme caraetere joker u . 

Exemple : [IPmaskList] = 192.168.1 * 
[adminOnly] 

Booleen (0,1). En specifiant 1, seuls les administrateurs peuvent aeceder au backend. La 
valeur 0 donne I'acces a tous les utilisateurs. Cette option peut etre utile pour exclure 
les utilisateurs du systeme lors des travaux de maintenance et de mise a jour. 

Exemple : [adminOnly] = 0 

[lockBeUserToDBmounts] 

Booleen (0,1). La valeur par defaut 1 octroie uniquement aux utilisateurs I'acces a leur 
propre Pagemount, ce qui peut etre desactive en entrant 0. Ce dernier scenario est 
hautement improbable. 

Exemple : [lockBeUserToDBmounts] = 1 
[lockSSL] 

Entier (0,1,2). Les valeursO et 1 demandenta TYP03 de rend re le backend disponible uni- 
quement via une connexion SSL. La valeur 2 fait en sorte que I'acces a http://votredo- 
maine.com/typo3 soit automatiquement redirige vers https://votredomaine.com/ 
typo3. 

Exemple : [lockSSL] = 0 

[disable_exec_function] 

Booleen (0,1). Vous supprimez I'utilisation de la fonction PHP exec() en entrant 1, ce qui 
peut etre utile sous Windows. Pour ImageMagick, la meme action se fait en desactivant 
touteslesfonctionsgraphiques : [GFX][im]=0. 

Exemple : [disable_exec_function] = 0 

11 NdT : wildcard en anglais 
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[usePHPFileFunctions] 

Booleen (0,1). Quand PHP opere en mode safe_mode, toutes les operations sur les fi- 
chiers doivent etre passees par le biais de fonctions PHP plutot que par des appels a des 
commandes externes via la fonction execf). C'est le comportement adopte lorsque la 
valeur est mise a 1. 

Exemple : [usePHPFileFunctions] = 1 
[compressionLevel] 

Entier (1-9). Requiertzlib en PHP. La compression avec gzip se fait en entrant une valeur 
de 1 a 9. Les pages comprimees utilisent moins de bande passante mais la charge du CPU 
augmente avec des taux de compression plus importants. L'entree 0 ne realise aucune 
compression, l'entree 9 produit une compression maximale. Alternativement, si vous 
specifiez TRUE, la compression est ajustee dynamiquement selon la charge du systeme 
(seulementsous Linux et FreeBSD). La compression peutetre egalementconfigureedans 
Apache. 

Exemple : [compressionLevel] = 0 
[MaxFileSize] 

Entier. Indiquez la taille maximale des fichiers edites par TYP03. Cette valeur est per- 
tinente uniquement dans le contexte des ta i I les de fichiers definis pour PHP dans le 
fichier PHP.ini. 

Exemple : [maxFileSize] = 10000 
[RTEenabled] 

Booleen(0, 1). Cette option vous permet d'activer (1) ou de desactiver (0) globalement 
le Rich Text Editor independamment de la configuration dans le backend. 

Exemple : [RTEenabled] = 1 
[forceCharset] 

Chame de caracteres. Le jeu de caracteres est normalement en accord avec le jeu de 
langues dans le backend des utilisateurs respectifs. Cette option permet de le definir 
pour tous les utilisateurs. Les options sont indiquees dans les tables de jeu de caracteres 
et dans le repertoire t3lib/csconvtbl/. Pour I'encodage Unicode par exemple, vous pou- 
vez utiliser utf-8. Specifiez les jeux de caracteres en minuscules. 

Exemple : [forceCharset] = iso-8859-8 
[installToolPassword] 

Chaine de caracteres. II s'agit de la valeur de hachage du mot de passe pour I'outil 
d'installation. Pour bloquer I'acces, n'entrez rien. II est judicieux de proteger en outre 
le repertoire de I'outil d'installation, typo3/install/, a I'aide d'un mot de passe via un 
fichier .htaccess. 

Exemple : [installToolPassword] = e1c102cf0300bf73e47018f5bd7766e5 
[trackBeUser] 

Booleen (0,1). Entrez la valeur 1 pour demander a TYP03 de tracer dans la table sys_ 
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trackbeuser chaque appel d'un script dans le backend. Vous devez aussi installer I'ex- 
tension beuser_tracking. 

Exemple : [trackBeUser] = 0 

[defaultllserTSconfig] 

ChaTne de caracteres. TypoScript : cette option permet de definir du code TypoScript par 
defaut valable pour tous les utilisateurs baekend (voir chapitre 4.8). 

Exemple : [defaultllserTSconfig] = admPanel.enable= 1 

[defaultPageTSconfig] 

ChaTne de caracteres. TypoScript : cette option permet de definir du code TypoScript par 
defaut valable pour toutes les pages (voir chapitre 4.8). 

Exemple : [defaultPageTSconfig] = mod.web_layout.tt_content.colPos_list = 0,3 

[enabledBeUserlPLock] 

Booleen (0,1). En entrant 1, vous activez I'option User/Group TSConfig option. lockTolP. 
Une configuration plus poussee est possible via le TSConfig de I'utilisateur ou du groupe 
a parametrer. 

Exemple : [enabledBeUserlPLock] = 1 
[fileDenyPattern] 

ChaTne de caracteres. Specifiez les sequences de caracteres selon la syntaxe de la fonc- 
tion eregi(). Les fichiers correspondant a ces sequences ne sont pas renommes ou char- 
ges sur le serveur. 

Exemple : [fileDenyPattern] = \.php\.|\.php3\. 
[interfaces] 

Indiquez ici a quelles interfaces I'utilisateur accede apres avoir ouvert une session dans 
le backend, et dans quel ordre. Les choix possibles sont backend et frontend (separes 
par une virgule le cas echeant). 

Exemple : [interfaces] = backend 
[loginLabels] 

Les options d'entree de I'ecran d'ouverture de session sont reecrites avec d'autres ex- 
pressions, en francais par exemple. 

Exemple : [loginLabels] = Utilisateur|Mot de passe|lnterface|Ouvrir une session|Fer- 
mer la session|... 

[notificationPrefix] 

Cette option permet de creer un en-tete pour les messages du systeme a I'administra- 
teur. 

Exemple : [notificationPrefix] = Les miracles s'accomplissent parfois. .. 
[createGroup] 

Entier. Specifie le groupe lors de la creation de nouveaux fichiers et repertoires. Le 
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groupe peut etre change sur les systeme UNIX. Activez cette option si vous voulez chan- 
ger le groupe des fichiers et des repertoires. C'est utile dans tous les cas oil le serveur 
Web opere avec un utilisateur ou un groupe different du votre. Dans ce cas, creez un 
nouveau groupe, et ajoutez-vous-y, ainsi que I'utilisateur du serveur Web. Des ce mo- 
ment, vous pouvez fixer le dernier bit de fileCreateMask/folderCreateMask a 0 (p.ex. 
770). Important : I'utilisateur sous lequel votre serveur Web opere doit etre un membre 
du groupe que vous specifiez ici. Sinon, vous risquez de voir surgir des erreurs. 

Exemple : [createGroup]= 
[lockIP] 

Entier (0-4). Verrouillage de la session IP des utilisateurs backend. Voir [FE][locklP] pour 
plus de details. La valeur par defaut est 4. 

Exemple : [locklP]=4 
[sessionTimeout] 

Entier. Specifie la duree maximale d'une session pour les utilisateurs backend. La valeur 
par defaut est 3600 secondes, soit une heure. 

Exemple : [sessionTimeout]=3600 
[loginSecurityLevel] 

Chaine de caracteres. Mot-cle qui determine le niveau de securite du login dans le back- 
end, normal signifie que le mot de passe du formulaire d'identification est envoye « en 
clair ». challenge veut dire que le password n'est pas envoye, mais qu'une valeur de 
hachage est calculee. En specifiant superchallenged, la valeur de hachage est calculee 
sur le mot de passe avant que cette valeur soit elle-meme eombinee avec la valeur 
challenge (de cette maniere, la valeur de hachage du mot de passe est enregistree 
dans la base de donnees et non plus le mot de passe lui-meme ). NE PAS CHANGER 
cette valeur manuellement ; sans un autre service d'identification, cela empeche les 
ouvertures de session dans TYP03 puisque la methode « superchallenged » est encodee 
dans le systeme d'identification par defaut. 

Exemple : [loginSecurityLevel]=normal 

[useOnContextMenuHandler] 

Booleen. Si I'option est activee, le die droit (right-click) du menu contextuel est active 
dans le backend - meme si ce n'est pas un attribut XHTML ! 

Exemple : [useOnContextMenuHandler]=1 
[accessListRenderMode] 
[explicitADmode] 

2.5.5 [FE]:$TYP03_CONF_VARS["FE"] 

Les parametres de configuration dans la section suivante se referent au frontend, e'est-a-dire 
aux sites Web publies par TYP03. 
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[png_to_gif] 

Booleen (0,1). La valeur 1 active la conversion de tous les fichiers PNG generes dans le 
frontend en fichiers GIF, ce qui laisse un grand nombre de fichiers temporaires dans le 
repertoire typo3temp/. 

Exemple : [png_to_gif] = 0 

[tidy] 

Booleen (0,1). Si vous indiquez 1, le code HTML est nettoye et optimise a I'aide du 
programme tidy. Cette option est recommandee, surtout pendant les periodes de deve- 
loppement, de maniere a ce que le code HTML genere soit plus lisible. Souvenez-vous 
toutefois que tidy, selon les options, nettoie ou repare le code HTML defectueux. II est 
preferable de desactiver cette option pour les systemes en ligne pour eviter de charger 
inutilement le serveur. tidy est disponible a I'adresse suivante : http://www.w3.org/ 
People/Raggett/tidy/. 

Exemple : [tidy] = 0 
[tidy_option] 

Options : [all, cached, output], all provoque le nettoyage par tidy de tout le contenu 
avant qu'il soit sauve, ou pas, dans le cache, cached nettoie le contenu uniquement 
avant qu'il soit sauve dans le cache, output nettoie le code HTML seulement s'il est 
demande a partir du cache. 

Exemple : [tidy_option] = cached 
[tidy_path] 

Specifiez la commande tidy, chemin et options inclus, a I'endroit adequat. D'autres pa- 
rametres que ceux par defaut peuvent etre definis suivant la documentation de tidy. 
Pour generer du XHTML par tidy, ajoutez I'expression -output-xhtml true. 

Exemple : [tidy_path] = tidy -i —quiet true —tidy-mark true -wrap 0 
[logfile_dir] 

Chemin. Le repertoire que ce chemin indique est eel ui dans lequel TYP03 ecrit les fichiers 
log selon la denomination des serveurs Web, pour leur traitement par des programmes 
statistiques. Le serveur Web doit avoir le droit d'ecrire dans le repertoire. Le nom du 
repertoire doit se terminer par une barre oblique. Vous trouverez plus d'informations a 
la section 4.12.2. 

Exemple : [logfi le_dir] = /srv/www/logs/ 
[logfile_write] 

II existe plusieurs methodes pour ecrire des fichiers log. Par defaut, TYP03 utilise la 
commande UNIX echo. Si vous entrez fputs, TYP03 utilise alors la fonction PHP du 
meme nom qui fonctionne egalement en safe_mode. 

Exemple : [logfile_write] = fputs 
[publish_dir] 

Chemin menant au repertoire dans lequel TYP03 publie les pages HTML de maniere 
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statique. Le serveur Web doit avoir le droit d'ecrire dans le repertoire. Les pages peuvent 
alors etre publiees a partir du panneau d'administration dans la zone publish. 

Exemple : [publish_dir] = /srv/www/htdocs/publish/ 
[addAllowedPaths] 

Chemins separes par des virgules. Le stockage des ressources associees au TypoScript se 
fait dans les repertoires que vous indiquez ici. Les chemins sont relatifs au repertoire 
Web. Le repertoire par defaut commence par une barre oblique; sans barre oblique, 
chaque repertoire qui commence avec la meme expression est accepte. 

Exemple : [addAllowedPaths] = b2b/, /b2c/ 
[allowedTempPaths] 

Chemins separes par des virgules. II s'agit de chemins additionnels oil vous placez des 
images temporaires pour I'utilisation de imgResource dans le TypoScript. 

Exemple : [allowedTempPaths] = b2btemp/ 
[debug] 

Booleen (0,1). Lorsque I'option est activee (1), les informations de debogage sont in- 
diquees dans le frontend. Cela peut aussi etre fait par TypoScript. 

Exemple : [debug] = 1 

[simulateStaticDocuments] 

Booleen (0,1). Avec cette entree, I'affichage d'adresses URLstatiquessimulees est active 
par defaut, mais doit etre configure separement par TypoScript. 

Exemple : [simulateStaticDocuments] = 1 
[noPHPscriptlnclude] 

Booleen (0,1). Lorsque cette option est activee, seuls les scripts PHP situes dans le 
repertoire media/scripts/ sont appeles par TypoScript. 

Exemple : [noPHPscriptlnclude] = 0 
[compressionLevel] 

Cette valeur definit par la fonction zlib en PHP la compression des pages HTML dans le 
frontend. La valeur 1 correspond au taux de compression le plus faible et la valeur 9 au 
plus important. Plus le taux de compression est important, plus la bande passante est 
epargnee, mais plus la charge du serveur est grande. L'entree TRUE permet au taux de 
compression d'etre automatiquement adapte a la charge du systeme. 

Exemple : [compressionLevel] = 0 

[compressionDebuglnfo] 

Booleen (0,1). Les tailles des versions comprimees et non comprimees d'une page sont 
indiquees au bas de celle-ci lorsque vous activez cette option. Ceci devrait toutefois etre 
uniquement utilise pour des tests, etant donne que le contenu est comprime deux fois 
afin d'afficher ces statistiques. 

Exemple : [compressionDebuglnfo] = 0 
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[pageNotFound_handling] 

ChaTne de caracteres. Grace a eette option, vous speeifiez a TYP03 comment reagir a des 
requetes de pages lorsqu'elles ne sont pas disponibles. Le comportement par defaut est 
d'afficher la page « la plus proche ». En entrant true ou 1, un message d'erreur s'affiche. 
Une alternative est de specifier une page HTML. 

Exemple : [pageNotFound_handling] = http://www.brunching.com/gone.html 

[pageNotFound_handling_statheader] 

ChaTne de caracteres. Si I'option [pagel\lotFound_handling] est activee, la chaine de 
caracteres specifiee est toujours envoyee comme en-tete. 

Exemple : [pageNotFound_handling_statheader] = Status: 404 Not Found 
[userFuncClassPrefix] 

Ce prefixe est la premiere partie, soit de chaque fonction, soit du nom d'une classe 
appelee par TypoScript, par exemple dans la fonction stdWrap. 

Exemple : [userFuncClassPrefix] = user_ 
[addRootLineFields] 

Liste separee par des virgules. Une liste de champs de la table pages est ajoutee a la 
requete de selection. 

Exemple : [addRootLineFields] = 
[checkFeUserPid] 

Booleen (0,1). Si I'option est activee, les formulaires d'identification dans le frontend 
doivent specifier I'lD de la page (pid) sous lequel les utilisateurs frontend sont enre- 
gistres. Si I'option est desactivee (0), la configuration eval de uniquelnPid dans le $TCA 
pour le champ fe_users.username devrait etre changee en unique. L'entree ressemble 
alorsa ceci : $TCA['fe_users'] ['columns'] ['username']['config'] ['eval'] = 'nospace, lower, 
required, unique'; L'endroit de la sauvegarde n'est plus specifie dans le TypoScript de la 
page sur laquelle le formulaire d'identification est situe ; tous les utilisateurs FE sont 
globalement valides. 

Exemple : [checkFeUserPid] = 1 

[d ef a u 1 1 U se rTSco n f i g] 

ChaTne de caracteres. Predefinissez les entrees TSConfig pour tous les utilisateurs fron- 
tend et les groupes. 

Exemple : [defaultUserTSconfig] = 

[defaultTypoScript_constants] 

ChaTne de caracteres. Cette option permet de predefinir les constantes TypoScript pour 
tout le systeme. 

Exemple : [defaultTypoScript_constants] = 

[defaultTypoScript_editorcfg] 

ChaTne de caracteres. Permet de definir la configuration editorcfg de TypoScript pour 
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tout le systeme. Cette option est utilisee par CSS Styler (ele d'extension : tstemplate_ 
cssanalyzer). 

Exemple : [defaultTypoScript_editorcfg] = 
[dontSetCookie] 

Booleen (0,1). Le systeme ne met aucun cookie dans le frontend lorsque cette option est 
activee, ce qui a pour effet d'empecher les ouvertures de session pour I'identification. 

Exemple : [dontSetCookie] = 0 
[get_url_id_token] 

Chaine de caracteres. Si I'option TypoScript config.ftu est activee, les utilisateurs, dans le 
frontend, peuvent ouvrir une session sans cookie. Dans ce cas, la session de I'utilisateur 
est geree via un parametre get. C'est le nom de ce parametre que vous devez saisir ici. 
Ce type d'administration de session n'est en principe pas recommande, car il mene plus 
facilement a des erreurs que la variante avec cookies. 

Exemple : [get_url_id_token] = SESSID 
[content_doktypes] 

Chaine de caracteres. Definissez dans une liste separee par des virgules les types de 
pages (valeur du champ pages.doctype) qui sont reconnues par le systeme comme 
pages ou dossiers systeme. 

Exemple : [content_doktypes] = 1,2,5,7 

[enable_mount_pids] 

Booleen (0,1). Vous permet de desactiver globalement (0) la fonction de point de mon- 
tage pour les pages. 

Exemple : [enable_mount_pids] = 1 
[pageOverlayFields] 

Chame de caracteres. Les champs specifies sont utilises dans les requetes de bases de 
donnees pour les sites Web multilingues. Cette option est pertinente pour les extensions 
qui ajoutent leurs propres champs a la table pages. 

Exemple : [pageOverlayFields] = title.subtitle.navjitle.media.keywords.description, 
abstr... 

[strictFormmail] 

Booleen. La valeur 1 specifie que la fonctionnalite « formmail » de TYP03 envoie des 
emails seulement aux destinataires qui ont ete encodes par le systeme. C'est une pro- 
tection contre les personnes malveillantes qui pourraient detourner I'util isation du for- 
mulaire mail. 

Exemple : [strictFormmail] = 1 
[secureFormmail] 

Booleen. La valeur 1 specifie que la fonctionnalite « formmail » de TYP03 envoie des 
emails seulement aux destinataires qui sont definis dans I'enregistrement de I'element 
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de contenu associe au formulaire. C'est une protection contre les personnes malveil- 
lantes qui pourraient detourner I'utilisation du formulaire mail. 

Exemple : [secureFormmail] = 1 
[lockIP] 

Entier (0-4). Si cette valeur est superieure a zero, un controle est effectue sur le pa- 
rametre REMOTE_ADDR_IP des utilisateurs du frontend (fe.users) durant leur session. 
Cela ameliore la securite, mais peut couper I'acces si I'utilisateur change d'adresse du- 
rant sa session (dans ce cas, choisissez une valeur plus basse : 2 ou 3). La valeur entiere 
indique combien de parties de I'adresse IP doivent etre incluses pour la verification. 
Reduire la valeur a 1-3 signifie respectivement que la premiere, la deuxieme ou la 
troisieme partie de I'adresse IP est utilisee. 4 constitue I'entierete de I'adresse IP et est la 
valeur recommandee. 0 (zero) desactive la verification. 

Exemple : [lockIP] = 2 
[loginSecurityLevel] 

Chaine de caracteres. Voir la description de TYP03_CONF_VARS[BE][loginSecurityLe- 
vel]. L'etat par defaut du frontend est normal. D'autres niveaux plus eleves peuvent etre 
configures. 

Exemple : [loginSecurityLevel] = normal 
[lifetime] 

Entier positif. Si la valeur est strictement superieure a zero, le cookie d'un utilisateur FE 
n'est pas un cookie de session (efface lorsque la fenetre du navigateur est fermee), mais 
plutot un cookie avec une duree de vie indiquee par la valeur. Par exemple une valeur de 
3600*24*7 aura pour resultat une identification automatique de I'utilisateur FE durant 
toute une semaine. 

Exemple : [lifetime] = 604800 

[maxSessionDataSize] 

Entier. Specifie la taille maximum (en octets) des donnees de sessions frontend qui sont 
sauvegardees dans la table fe_session_data. 0 signifie qu'il n'y a pas de limite. Ce- 
pendant, cette valeur n'est pas conseillee, car on ne verifie plus des ce moment que 
les donnees de session sont enregistrees seulement apres I'activation d'un cookie de 
confirmation. 

Exemple : [maxSessionDataSize] = 10000 
[lockHashKeyWords] 

Liste de valeurs separees par des virgules. La seule valeur est pour I'instant useragent. 
Cette valeur signifie que la session utilisateur de frontend depend de la valeur du pa- 
rametre HTTP_USER_AGENT, diminuant ainsi le risque de detournement de session. Ce- 
pendant, dans certains cas (tels que des solutions de paiement), vous devez desactiver 
cette option (p. ex. avec unechame de caracteres vide) car le cookie de session est utilise. 

[hidePageslfNotTranslatedByDefault] 
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2.5.6 Autres options 

[MODS]: $TYP03_CONF_VARS["MODS"] 

Contenait les options de configuration des modules, maisa ete remplacee par le systeme 
d'extensions. 

[USER]: $TYP03_CONF_VARS["USER"] 

Contenait les options de configuration des parametres de vos propres scripts mais a ete 
remplacee par le systeme d'extensions. 

[SC_OPTIONS]: $TYP03_CONF_VARS["SC_OPTIONS"] 

Cette section est utilisee pour rendre disponibles vos propres options de configuration 
pour n'importe quel script dans TYP03 (en general, des modules backend). 

[EXTCONF]: $TYP03_CONF_VARS["EXTCONF"] 

Vous pouvez rajouter ici vos options de configuration pour vos propres extensions. Pen- 
dant I'insta Nation dans le gestionnaire d'extensions, celles-ci devront etre affichees en 
utilisant le fichier ext_conf_template.txt. 

Exemple : $TYP03_CONF_VARS['EXrCONF , ][ , ma_cle_extension , ][ , mon_option'] = 
'ma_valeur'; 

2.6 Separation du serveur de production et du serveur en 
ligne 

Lorsque vous avez besoin d'augmenter vos performances, et pour des raisons de securite, il 
peut etre utile, et meme necessaire, de partager entre plusieurs serveurs la generation des 
pages et d'autres contenus ainsi que leur presentation. 

Une possibility est de publier le site Web en pages HTML statiques, sans avoir ni la base de 
donnees ni TYP03 sur le systeme en ligne. Mais dans le scenario standard, le site Web lui- 
meme contient ces elements dynamiques generes a partir de la base de donnees, ce qui rend 
TYP03 necessaire sur le systeme en ligne. Le probleme principal d'un tel scenario est la syn- 
chronisation du contenu de la base de donnees entre lesdifferentssystemes. En effet, plusieurs 
serveurs pourraient etre impliques, par exemple pour repartir la charge. 

Differents mecanismes de synchronisation sont disponibles, en fonction de la base de donnees 
utilisee. Consultez la documentation de votre vendeur de base de donnees. 

La synchronisation directe ne vous permet pas de controler le processus de publication : ce qui 
se trouve sur le systeme de production est automatiquement place en ligne. Une alternative 
est de realiser manuellement la synchronisation, en fonction du SGBDR utilise, pour permettre 
une etape supplemental dans la mise en ligne du contenu. 

Pour Installation de TYP03 supportant le site en ligne et n'offrant pas de fonction d'edition, 
il est judicieux de desactiver les identifications des utilisateurs backend en donnant la valeur 
1 au parametre $TYP03_CONF_VARS['BE']['adminOnly'] de la section All Configuration de 
I'outil d'installation. 



2.7 Sauvegardes 



2.6.1 Pages statiques 

Comme nous I'avions deja mentionne brievement a la section 2.5.5, une seconde possibility 
encore plus simple, est de publier des pages statiques. Une entree dans I'outil d'installation, 
combinee a la configuration dans le panneau d'administration dans le frontend, permet de 
sauver toutes les pages Web dans un repertoire predefini du serveur. 




Publier les pages: 



J^] Accueil ... 



Publier maintenjnt! 




Figure 2.8: 
Publication de pages 
statiques sur 
plusieurs niveaux 
dans le panneau 
d'administration du 
frontend 



II existe d'autres logiciels qui permettent comme TYP03 de publier des pages statiques. Par 
exemple, I'outil OpenSource HTTrack est disponible sous Linux et Windows et peut etre tele- 
charge gratuitement a I'adresse : http://www.httrack.com/. 



2.7 Sauvegardes 

II existe plusieurs methodes pour creer des sauvegardes. La plupart des entreprises ont leurs 
propres strategies de sauvegarde, et le moyen le plus sur est d'inclure le repertoire adequat du 
serveur Web dans ces routines de sauvegarde, sans oublier le repertoire oil les fichiers de base 
de donnees sont enregistres. 

II existe differentes extensions disponibles pour creer des sauvegardes a partir de TYP03. Tou- 
tefois, meme un administrateur relativement inexperimente peut facilement mettre en place 
une sauvegarde automatique au niveau du systeme d'exploitation, ce qui est une meilleure 
solution, puisque les sauvegardes ne sont plus lancees manuellement a chaque fois. 

Avec une entree dans le systeme crontab (UNIX), ce script est appele regulierement : dans 
I'exemple ci-dessous, il est lance tous les jours a une heure du matin. 

Des lors, les fichiers de sauvegarde sont copies automatiquement sur un systeme physiquement 
separe. Un script tel que celui presente ci-apres realise facilement et automatiquement cette 
operation grace a rsync. Une cle SSH est necessaire pour activer la transmission des donnees 
sous forme cryptee. 

Voici un exemple de script 12 : 

#!/bin/sh 

# script rsync_backup . sh 

# backup of webserver document root via rsync to backup server 

# additional do a dump of typo3-db 

,2 avec nos remereiements a Harald Oest de http://www.ixsys.de 
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# ip or fqhn of backup server 
SERVER- "my_backup_server " 

# user account at backup server 
USER- "my_username " 

# ssh-key (without passphrase!) used for login 
SSHKEY- " /root/ . ssh/backup_server_key " 

# destination dir at backup server 
DSTDIR- " / typo3_bkp " 

# name of local typo3 database 
DB- " typo3_db" 

# user account to access typo3 database 
DB_USER= " typo3_db_user " 

# password to access typo3 database 
DB_PASS= " typo3_db_password " 

# these directories will be rsynced with backup server 
DIRS="/srv/www" 

# do a mysql-dump and store result in source dir 
/usr/bin/mysqldump --password=$DB_PASS -u $DB_USER $DB > \ 

/srv/www/typo3db_bkp . sql 

# rsync all requested dirs 
for DIR in $DIRS; do 

logger "rsync backup $DIR to $ SERVER" 

rsync --rsh="ssh -i $SSHKEY " -a $DIR $USER@ $ SERVER : $DSTDIR 
done ; 

# get actual size of backup 

ACT_SIZE = ssh -i $SSHKEY $USER@$SERVER "du -sh $DSTDIR" 
logger "total backup size: $ACT_SIZE" 

Vous generez une cle SSH sans demande de mot de passe comme suit : 

~#~ssh-keygen -t rsa 

Generating public/private rsa key pair. 

Enter file in which to save the key ( /root/ . ssh/id_rsa) : /root/ . ssh/backu 
p_server_key 

Enter passphrase (empty for no passphrase) : [Enter] 
Enter same passphrase again: [Enter] 

Your identification has been saved in /root/ . ssh/backup_server_key . 
Your public key has been saved in /root/ . ssh/backup_server_key. pub . 
The key fingerprint is : 

8b:lf:f9:c9:54:65:bc:f5:d6:ce:79:0d:e4:ld:56:2f root@local_box 

La paire de cles a maintenant ete creee et la cle privee est deja au bon endroit (/root/.ssh/baek- 
up_server_key). II reste a envoyer la cle publique au serveur de sauvegarde : 

~#~scp /root/ . ssh/backup_server_key. pub \ 
> user@my_backup_server : /home/ . ssh 



A present, connectez-vous a my_backup_server et activez la cle SSH 



2.8 Mises a jour 



root@my_backup_server : # oat /home/ . ssh/backup_server_key. pub >> \ 
> /home/ . ssh/authorized_keys 

Pour I'effacer : 

root@my_backup_server : ~ # rm /home/ . ssh/backup_server_key . pub 

La meme chose sur I'ordinateur local : 

~#~rm /root/ . ssh/backup_server_key.pub 

Vous pouvez maintenant vous connecter au serveur de sauvegarde sans mot de passe : 

~#~ssh -i /root/ . ssh/backup_server_key user@my_backup_server 

Voici un exemple d'une entree crontab qui appelle la sauvegarde rsync a une heure du matin : 

# call backup script every night at 01.00 

0 1 * * * root test -x /root/bin/rsync_backup. sh && \ 
/root/bin/rsync_backup . sh 

2.8 Mises a jour 

Les mises a jour de TYP03 sont particulierement agreables pour I'administrateur car elles 
durent rarement plus de quelques minutes, et ceci grace aux liens symboliques deja souvent 
mentionnes. Ceux-ci pointent vers un repertoire unique qui contient le code source de TYP03 ; 
tous les autres fichiers sont soit independants de la version et restent ou ils sont, soit sont 
egalement des liens symboliques. 

La premiere etape de toute mise a jour est de sauvegarder I'ensemble de I'installation, ou du 
moins la base de donnees. Avec la commande : 

~#/srv/wwwmysqldump -u user -p nom_base_donnees backup. tgz 

vous creez un fichier de sauvegarde apres avoir entre le mot de passe de I'utilisateur de la base 
de donnees de MySQL. En cas d'urgence, vous pouvez desarchiver cette sauvegarde grace a la 
commande : 

~#/srv/wwwtar xzf backup. tgz 

et ensuite, par la commande : 

~#/srv/wwwmysql -u user -p datenbankname < backup. sql 

restaurer la sauvegarde dans la base de donnees. 

Retour a la mise a jour : pour utiliser la nouvelle version plutot que I'ancienne, supprimez 
I'ancien lien symbolique. Par exemple, des que vous entrez : 

~#/srv/wwwrm typo3_src 



73 



votre site n'est plus en ligne ! 
Avec : 

~#/srv/wwwln -s . . /typo3-src-4 . 0 typo3_src 

un nouveau lien symbolique pointe vers la nouvelle source que vous venez de placer sur le 
serveur (cf. section 2.3.1). 

Sous Windows et generalement avec des distributions zip, tous les repertoires TYP03 (typo3, 
t3lib, tslib) doivent etre replaces manuellement, si vous n'utilisez pas Junction. 
Ainsi, la mise a jour est deja terminee au niveau des fichiers si le lien symbolique pointant vers 
la version TYP03 est recree. 

Rappelez-vous bien qu'apres un changement de version de TYP03, vous devriez d'abord ap- 
peler le Database Analyzer de I'outil d'installation. Les changements necessaires a la base 
de donnees sont identifies et affiches a I'aide de la fonction COMPARE. Ces changements 
concernent I'ajout de nouveaux champs dans la base de donnees ou des changements de 
definition de champs existants. Selectionnez Write to database et executez la mise a jour. La 
fonction COMPARE enleve egalement les tables de bases de donnees associees a des exten- 
sions qui ont ete desinstallees. II va de soi que vous devez savoir ce que vous faites lorsque 
vous executez cette fonction, et bien sur : sauvegardez, sauvegardez, sauvegardez ! Les tables 
et les champs a enlever sont d'abord renommes en ajoutant a leur nom le prefixe zzz_. lis sont 
reactives en enlevant ce prefixe, par exemple avec phpMyAdmin . 

II est conseille, pour des raisons evidentes, de ne pas executer la mise a jour sur des sites 
tres visit.es. Dans ce cas-la, il est preferable de faire une copie de la base de donnees et des 
fichiers, de definir faeces a la nouvelle base de donnees et d'executer des scenarios de reprise 
de donnees. Cela vous prepare par ailleurs a migrer en quelques secondes vers un nouveau 
serveur ou a changer de disque dur. 

2.9 En cas de probleme 

La communaute TYP03 vous propose plusieurs types d'aide en cas de probleme d'installation. 
Ces problemes sont tres diversifies etant donne les differentes combinaisons possibles de ser- 
veur Web, de base de donnees et de distribution PHP utilises. Deux « mailing lists » existent 
pour les questions d'installation, I'une pour le systeme d'exploitation Linux et I'autre pour Win- 
dows, cette derniere etant aussi utilisee via le protocole nntp [newsgroups). En outre, il existe 
une archive en ligne que vous devriez certainement consulter afin de vous assurer que votre 
question n'a pas deja ete posee. Souvenez-vous que les membres de la communaute d'utili- 
sateurs de TYP03 qui vous aident sont des volontaires : en leur demandant de I'aide, ne les 
distrayez pas avec des questions inutiles. Si vous decouvrez un bogue qui n'a pas encore ete 
decrit, enregistrez-vous a I'adresse http://bugs.typo3.org. 
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En 1999, Tim Berners-Lee, le pere du World Wide Web, declara : « From the point of view of 
users, the biggest change I want to see is to make everyone capable of writing Web pages and 
making links just as easily as people can make e-mail messages today. » 1 

La percee des systemes de gestion de contenu est principalement due au fait qu'ils repondent 
aux demandes des particuliers souhaitant publier du contenu sur le Web. Toutefois, le taux 
de succes varie en ce qui concerne la facilite d'utilisation, en particulier pour les systemes de 
gestion professionnelle de contenu. La societe Forrester Research, specialisee dans les etudes 
de marche, a mene une enquete en 2001 revelant que I'ergonomie des systemes etudies devait 
etre amelioree de toute urgence pour repondre aux besoins des utilisateurs. 2 

Ce que le vocable anglais reprend sous le terme de usability se mesure et s'obtient a I'aide 
d'etapes definies. En voici quelques exigences habituelles : 

■ L'interface de I'utilisateur doit repondre a ses besoins, etre intuitive et simple ; 

1 http://www.time.com/time/community/transcripts/1999/092999berners-lee.html 
2 http://www.forrester.com/ER/Research/Report/Summary/0,1 338, 14981.00.html 
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■ El le doit etre coherente et garder une structure uniforme ; 

■ El le doit offrir la possibility de la personnaliser suivant le role reserve aux diffe rents utilisa- 
teurs ou groupes d'utilisateurs ; 

■ Chaque fonction de I'application doit proposer a I'utilisateur des outils d'aide contextuels, 
un guide d'utilisation et des exemples pour debutants ; 

■ L'interface doit offrir la possibilite d'annuler des manipulations individuelles operees au 
cours d'une session, simplement en poussant sur un bouton (fonction « Annuler»). Un 
historique des modifications permet de recreer les etapes de travail precedemment enre- 
gistrees. 

■ De plus, les assistants [wizards] sont importants afin de guider les utilisateurs lors d'opera- 
tions specifiques. 

En regie generale, un manque ou un exces de fonctionnalites nuit au bon deroulement du 
travail. II est done necessaire d'avoir la possibilite d'etendre ou de reduire les fonctionnalites : 
le systeme doit fournir exactement aux utilisateurs les fonctions necessaires a leur travail. De 
plus, les connaissances techniques requises pour utiliser le CMS doivent etre minimales, afin 
de reduire le plus possible I'effort d'installation. 

TYP03 offre tous ces avantages, et plus encore. Au cours de ses huit annees de developpement, 
la convivialite de l'interface utilisateur a ete optimisee grace aux experiences des particuliers 
qui I'utilisent au quotidien (environ 122 000 installations sont actuellement operationnelles). 

3.1 Le role du redacteur 

La tache du redacteur est de creer de nouveaux contenus, de les adapter au media auquel ils 
sont destines, et de les integrer dans I'application correspondante, un site Web par exemple. 
L'administrateur place alors I'utilisateur, par le biais des droits d'acces, dans une sorte de « bac 
a sable » a partir duquel il a un acces (limite) au systeme eta ses fonctionnalites. Des lors, I'uti- 
lisateur accede a son espace de travail (backend) qui correspond a ses taches et aux ressources 
qui lui sont allouees (voir chapitre 4.1). Alors qu'un redacteur de presse, par exemple, introduit 3 
de nouveaux articles dans le systeme, un redacteur en chef aura une vue plus etendue, de par 
ses droits d'acces associes a son groupe d'utilisateur. 

Reference 509060 En fonction de la duree du cycle de vie du contenu et de la complexite des procedures de 
travail, le redacteur se contente de transformer certaines parties du contenu sur I'itineraire vers 
sa publication. Le redacteur travaille au sein de ce qu'on appelle un workflow, avec d'autres 
redacteurs. 

Reference 509060 Nous allons vous presenter ci-apres l'interface utilisateur dans laquelle le contenu est redige, 
ainsi qu'un module de taches - une sorte de centre de communication pour les membres d'un 
projet. Nous poursuivrons en expliquant la facon de creer une page et d'y ajouter un contenu. 
Nous ne nous attarderons pas sur chaque champ (des rubriques d'aide contextuelles ainsi que 
le tres complet « Manuel du redacteur » sont prevus a cet effet, cf. reference), mais plutot sur 
I'aspect general des pages et des types de contenu, ainsi que sur leur utilisation pratique. Les 

3 « works in » dans le jargon anglais des habitues du CMS 
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3.2 Acceder au systeme 



aspects specifiques tels que la manipulation de Rich Text Editor, un editeur de texte, seront 
traites separement. Finalement, nous presenterons les procedures et les outils qui simplifient 
et rendent plus efficace le travail quotidien des editeurs sur TYP03. 



3.2 Acceder au systeme 

TYP03 est un systeme de gestion de contenu base sur une interface Web. II est soit installe 
sur le serveur intranet dans une entreprise, soit sur un serveur Web ou extranet accessible 
publiquement. Pour acceder au systeme et creer ou mettre a jour le contenu d'une page, les 
redacteurs n'ont besoin que d'un navigateur et de I'adresse Internet correcte, peu importent 
I'endroit et I'heure. 

TYP03 fait la distinction entre deux zones differentes : le backend ou zone d'administration 
pour la gestion des pages et des donnees, et le frontend, le site Web tel que le voient les 
visiteurs. Le redacteur peut utiliser ces deux modes de TYP03 pour modifier le contenu. Mors 
que le backend offre un environnement de travail complet, comportant de nombreuses fonc- 
tionnalites, le frontend peut etre utilise de facon tres simple et intuitive. Les outils d'edition de 
base sont fort semblables dans les deux zones ; les autres elements et la maniere de travailler 
decrits ici se retrouvent partiellement dans le frontend. 

3.2.1 Configuration du navigateur 

TYP03 fonctionne avec differents navigateurs (Netscape Navigator 6.x, 7.x, Mozilla Firefox, Reference 352869 
Internet Explorer 5.x, 6.x, etc.) qui varient legerement dans leur affichage et leurs fonctionna- 
lites. Ces differences ne sont pas significatives, a ceci pres que Rich Text Editor n'est disponible 
qu'avec Internet Explorer, parce qu'il necessite ActiveX de Microsoft. II existe plusieurs alterna- 
tives pour Mozilla via Installation d'extensions dans le systeme. 

Le navigateur doit accepter les cookies, et le JavaScript doit etre active. La configuration du 
cache du navigateur doit etre ajustee de sorte que la toute derniere version d'une page soit 
servie lorsqu'on en fait la requete. 



3.2.2 Identification 

Pour vous identifier afin d'acceder au backend, il vous suffit d'entrer I'URL de votre site dans 
votre navigateur suivi de /typo3 (ex. : http://www.votredomaine.com/typo3). La fenetre d'iden- 
tification (voir image) apparait. Entrez votre nom d'utilisateur et votre mot de passe. Les mots 
de passe pour I'accesau backend sont transmis sous forme encryptee parTYP03 et sauvegardes 
en toute securite dans le systeme de base de donnees. 



TYPO 3 







Administration Login on BT3-Entrcprlsc 
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Figure 3.1: 
Identification avec 
nom d'utilisateur et 
mot de passe 
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3.3 Interface utilisateur et modules 



Reference 502403 Le backend designe interface utilisateur de TYP03 oil travaille le redacteur. L'administration 
des pages et de leur contenu via I'interfaee frontend sera reprise plus bas (cf. section 3.8). Une 
fois que le redacteur s'est identifie, il accede a son espace de travail. N'oubliez pas : I'apparence 
de I'interfaee utilisateur peut varier considerablement d'un redacteur a un autre. Tout depend 
de la configuration definie par I'administrateur. 

Juste apres I'identification, vous vous trouvez ensuite soit sur une page d'aide, presentant une 
courte description de chaque module, soit dans le module Utilisateur — > Centre de taches. 

En cliquant sur une des options de navigation du menu Web dans la partie gauche de la page, 
la structure du backend s'affiche ainsi : 



Figure 3.2: 
Module Aide — ► sur 
les modules apres 
identification 
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Sur les modules 
A propos do ... 
Manual 



TYPO 3 3.8.0 
Systeme de Geslion de Contenu Web 
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Void une breve description des modules disponibtes : 
d Web 
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[b2c redacteur 2] 



H3 Liste 



0 Fichiers 



Ce modules vous permet de creer et d'edrter les pages web. 11 vous apporte un 
Fditaiir rapida pnur un arr*< immadiat *U rnntanu primaira de la paga. Fn pins, unm 
pouvec gerer plusieur* Ungues et colone pour le contenu de la page. Tinalement, 
vous pouvei acceder au contenu special des pages comme les livres d"or, les forums 
da dkrtHnne at la magacin an ligna. Ca mndnla pracanta ant si las «t*H«Hqu*« pnnr 
chaque page. 




C'est le systeme d' administration des fichiers de TYP03. Il vous permet d'acceder 
aux points de montage auxqucls vous avee droit. Avec ce module, vous pouvcz 
envoyer, copier, deplacer et supprfmer des fichiers sur le serveur. 

Liste des jmaae) du t«t>e.-toii-e 

J-umilsi^ ■ ^^j^ 



L'interface utilisateur de TYP03 est generalement divisee en trois colonnes : le menu de mo- 
dules a gauche, I' aire de navigation avec I'arborescence au milieu, et la vue detaillee a 
droite. 



3.3.1 Zones de l'interface utilisateur 



Si plusieurs redacteurs differents travaillent sur le meme systeme, le module Utilisateur — > 
Centre de taches (le centre de communication et d'administration de TYP03) presente nor- 
malement une configuration par defaut lorsqu'il est utilise pour la premiere fois. On y retrouve 
les trois zones caracteristiques de l'interface utilisateur. 
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figure 3.3: 
Les trois zones du 
bureau dans le 
module Taches : 
menu de modules [1] 
aire de navigation [2] 
vue detaillee [3] 



Menu de modules 

Le menu de modules constitue le menu principal du backend de TYP03. II reprend les modules 
auxquels un redacteur particulier a acces. 

Les modules principaux (Web, Fichier, Doc, ...) ne sont qu'un groupement de sous-modules 
(ex. : Page, Voir, Liste, etc.) qui, eux, pointent vers les veritables outils d'edition du backend. 
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Figure 3.4: 
Configurations 
backend : deux 
utilisateurs ayant des 
droits d'aeces 
differents 
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Aire de navigation 

Apres avoir selectionne un sous-module, la navigation se fait dans l'o/re de navigation. Dans 
le module principal Web, la colonne centrale affiche I'arborescence , oil sont reprises toutes 
les pages auxquelles le redacteur a acees (fg. 3.5[1]). 

On accede a I'arborescence des repertoires, donnant I'acces au gestionnaire de fichiers interne 
a TYP03, via le module principal Fichier (fg. 3.5[2]). 

A I'instar de I'explorateur Windows et d'autres gestionnaires de fichiers, les niveaux de la struc- 
ture des repertoires peuvent etre etendus a I'aide des icones « + » et « - ». Si vous cliquez sur 
le titre, une vue detaillee du repertoire selectionne s'affichera a droite. 

Si vous cliquez sur une icone representant un dossier, un menu contextuel s'affiche afin de 
permettre un acees rapide aux fonctions principals de travail. Dans les navigateurs Windows, 
ce menu s'ouvre directement dans I'arborescence. Pour les autres navigateurs, les fonctions 
apparaissent dans le cadre superieur du backend. 

Gardez a I'esprit les regies suivantes : 

Cliquez sur \' icone = 

Appel des fonctions du fichier (copier des elements, couper etc.) 

Cliquez sur le titre = 

Visualisez/modifiez le contenu 



Figure 3.5: 
Arborescence des 
pages [1] et 
arborescenee des 
repertoires du 
gestionnaire de 
fichiers [2] 
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Vue detaillee 

Le veritable espace de travail se trouve dans la vue detaillee (troisieme colonne). Une multi- 
tude d'informations peuvent s'y afficher en fonction du module selectionne. Dans les modules 
principaux Web et Fichier, un menu contextuel est aussi disponible, afin de simplifier votre 
travail (rappelez-vous : cliquez sur I'icone). 
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3.3.2 Modules principaux et sous-modules - un apercu 

Web 

Le module Web est celui dont le redaeteur se sert le plus. Les pages et leur eontenu y sont Reference 762976 
enregistres, geres et modifies. Les sous-modules s'y rapportant vous offrent souvent plusieurs 
possibilities pour arriver a des resultats identiques. 

Page 

Le module Page permet de ereer et de modifier de nouvelles pages et leur eontenu. 
Les options disponibles sont : 

Edition rapide 

Le eontenu est affiche directement en mode d'edition. Le menu deroulant ou la barre de 
bas de page vous donnent la possibility de passer d'un element en cours de modification 
a un autre. 

Colonnes 

Affiche le eontenu de toutes les colonnes d'une page. 
Langues 

Represente le eontenu d'une page elasse selon la langue dans laquelle celle-ci est 
definie. La gestion des traductions d'une page ne pose pas de reel probleme car TYP03 
permet Integration d'un site multilingue dans une seule et meme arborescence. 

Informations sur la page 

Fournit une vue d'ensemble des informations de base de la page; vous pouvez par 
exemple voir quelle est la configuration du cache pour la page, si el le doit etre publiee 
pendant une periode determinee, si son acces n'est reserve qu'a certains utilisateurs 
frontend, ou quelle meta-information a I'intention des moteurs de recherche se trouve 
sur la page. 

Voir 

Le module Voir affiche une page exactement comme un visiteur la verra sur le site. La page 
affichee comporte aussi des petites icones « crayon » qui permettent d'editer la page directe- 
ment. Ce module vous permet de visualiser des pages n'ayant pas encore ete mises en ligne. 

Liste 

L' « affichage liste » donne un acces direct aux pages et a leur eontenu. Les utilisateurs 
experiments preferent generalement travailler dans ce module. En activant la Vue etendue 
et le presse-papiers a I'aide des cases a cocher situees au bas de la vue detaillee, combines a 
une variete de fonctions, il est possible d'editer les enregistrements simultanement, de facon 
a atteindre des objeetifs precis. Vous trouverez plus d'informations sur cette fonction a la sec- 
tion 3.10. La Vue de localisation donne une vue d'ensemble des differentes traductions des 
elements de eontenu. 
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Info 

Dans le module Info se trouve un resume des informations importantes a propos de la page 
selectionnee. En fonetion de ses droits d'acces, le redacteur y trouve differentes vues de la base 
de donnees : 

Arborescence (vue d'ensemble) 

Contient les parametres de base (ex. : publication limitee dans le temps ou droits d'acces 
pour des groupes frontend), le cache et I'age, ainsi qu'un apercu des types d'enregistre- 
ments contenus dans les pages pour lesquelles le redacteur a les droits d'edition. Si vous 
utilisez cette vue sur plusieurs niveaux de I'arborescence, les valeurs d'un champ sur un 
ensemble de pages peuvent etre editees en un seul die, en utilisant I'icone « crayon ». 

Localisation (vue d'ensemble) 

La visualisation des traductions vous permetd'acceder a plusieurs niveaux de page pour 
verifier I'etat des traductions. En meme temps, vous pouvez creer des en-tetes pour de 
nouvelles pages de traduction, ou encore editer ou creer de nouvelles traductions de 
contenus. 

Fichier journal 

Ce module garde une trace de I'ensemble des modifications apportees par tous les 
redacteurs ; la vue peut etre ajustee dans la barre de navigation en fonetion du nombre 
de niveaux a afficher et de la periode de temps sur laquelle les modifications s'eche- 
lonnent. Dans la colonne Details, I'historique des modifications individuelles peut etre 
affiche et ouvert en formulaire d'edition a I'aide du lien — > His. 

Configuration TS de la page 

La Configuration TS de la page n'a pas beaucoup d'importance pour le redacteur, et 
devrait normalement etre desactivee par I'administrateur ; elle montre les details Typo- 
Script specifiques aux pages et aux utilisateurs, qui sont importants pour les adminis- 
trateurs et les developpeurs (la regie suivante s'applique ici : ce qui a ete determine pour 
une page vaut pour toutes les pages qui lui sont subordonnees). 

Statistiques d'affichage 

Les Statistiques d'affichage reprennent les donnees relatives aux visitessur votre site. 
Si I'extension Simple hit statistics est installee sur votre systeme, I'administrateur peut 
rapidement trouver un bon resume du taux de frequentation de chaque page du site. 



Acces 

Si le redacteur a acces a ce module, il peut afficher les permissions de chaque page via le 
mode Utilisateur. Si le redacteur est le « proprietaire » d'une page, e'est-a-dire qu'il I'a creee, 
il peut (et dans ce cas uniquement) en transferer les droits ou les retirer a un groupe dont 
il est membre, ou encore transferer sa propriete de la page a un autre membre du groupe. 
Le mode Permissions dresse la liste des proprietaires, du groupe dont il fait partie, et des 
permissions pour chacun. Le redacteur ne peut administrer ici que les droits des pages dont il 
est proprietaire. 
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Fonctions 

Le module Fonctions contient des outils simplifiant la creation et I'administration de pages et 
de contenu. II est bien sur necessaire que les extensions correspondantes aient prealablement 
ete installees et mises a la disposition du redacteur. Les divers Assistants de ce module per- 
mettent de manipuler I'arborescence des pages pour la creation ou le tri de pages. Le mode 
Importer permet d'importer des parties entieres d'arborescence TYP03. L'outil Text tools ef- 
fectue des recherches et/ou des remplacements des extraits de textes dans les elements de 
contenu. 

Nous aborderons I'utilisation de ce dernier outil a I'aide d'un exemple pratique a la section 
3.10. 



Fichier 

TYP03 gere toutes les ressources (telles que les gabarits HTML, les images ou les documents) 
dans le repertoire fileadmin/ de son gestionnaire de fichiers. En fonction de ses taches, le 
redacteur recoit des droits d'acces a differents points de montage du gestionnaire de fi- 
chiers. De plus, I'administrateur peut determiner precisement le type d'acces : par exemple, 
si le redacteur a le droit d'envoyer vers le serveur, de deplacer, d'effacer, de renommer, d'editer 
ou de creer de nouveaux fichiers, voire de supprimer un repertoire et ses so us- repertoires. 



Fichiers 

Le sous-module Fichiers permet au redacteur d'acceder aux ressources susmentionnees. Le 
contenu du dossier selectionne s'affiche dans la vue detaillee. Vous pouvez aussi naviguer via 
les icones dossier de I'arborescence. Pour rendre les fichiers accessibles, il suffit, a I'aide du 
menu contextuel, de les envoyer directement du PC du redacteur ou du reseau local vers son 
repertoire respectif dans TYP03. Encore une fois la regie suivante s'applique : 

Cliquez sur \'icdne = 

Appelle les fonctions du fichier (Copier, couper etc.) 

Cliquez sur le titre = 

Visualiser/editer le contenu 

Les cases a cocher situees en bas de la vue detaillee activent I'affichage de vignettes pour les 
fichiers image et le presse-papiers reprend le contenu de la memoire tampon pour copier ou 
deplacer des fichiers. 



Images 

Le sous-module Images reproduit les fichiers en mode previsualisation, accompagnesde details 
sur la taille de I'image et de ses dimensions en pixels. 
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Doc 

Le module Doc permet d'aeceder a des pages ou des elements de contenu que vous avez 
ouverts afin de les editer. Si vous avez une serie d'enregistrements ouverts, ce module vous 
permet de passer rapidement d'un formulaire d'edition a un module. Par consequent vous 
pouvez, par exemple, passer efficacement du gestionnaire de fichiers au formulaire d'edition 
d'un element de contenu. Vous pouvez naviguer d'un enregistrement a un autre via le menu 
deroulant. Si aucun document n'est ouvert, une liste des derniers enregistrements modifies 
s'affiche. 



Figure 3.6: 
Affichage des derniers 
enregistrements 
modifies dans le 
module Doc 



AUCUN DOCUMENT OUVERT 

II n'y a aucun document ouvert disponible pour edition. 

Vous pouvez eller £ le module Web > Page Q ou le module V/eb>Liste ffi pour 
trouver la page ou I'enregistrement que vous souhaitez editer. 

Vous pouvez choisir un de vos derniers enregistrements edites depuis cette liste! 



[""*) Contenus 


20-07-05 10:28 (16 min.) 
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Utilisateur 

Le module Utilisateur montre les taches et la configuration de I'interface propres a un utili- 
sateur. II offre aussi la possibilite de communiquer entre utilisateurs. 



Centre de taches 

Sous I'appellation « centre de taches » se cache le centre de communication de TYP03. Plu- 
sieurs sous-modules permettent, par exemple, de sauvegarder des notes personnelles ou en- 
core de communiquer entre membres d'un meme projet a I'interieur de workflows et du 
systeme de messagerie. Nous decrirons le module plus en detail a la section 3.4 



Configuration 

Reference 582216 Chaque utilisateur a la possibilite, dans une certaine mesure, d'adapter son environnement 
de travail de TYP03 a ses besoins, a commencer par la selection de la langue dans laquelle 
le backend est presente. De plus, vous pouvez ajuster I'affichage du backend en fonction de 
vos preferences ou des performances de votre ecran. De cette fagon, le menu de modules peut 
etre affiche sous forme de bolte de selection ou sous forme d'icones dans le cadre superieur du 
backend, afin de gagner plus d'espace. Vous pouvez decider d'afficher les rubriques d'aide pour 
les champs de saisie individuels, ou si vous le souhaitez, vous pouvez decider que les images 
listees s'affichent automatiquement sous forme de vignettes. 

Le menu contextuel ou le Rich Text Editor (pour les elements de contenu Texte ou Texte 
ft image) peuvent etre desactives, les copies recursives limitees a un certain nombre de ni- 
veaux, ou I'effacement recursif totalement interdit ou desactive. II est de toute fagon recom- 
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mande d'activer le chargement de fiehiers vers le serveur via le module Doc et le navigateur 
d'elements afin de pouvoir travailler efficacement : de cette facon, vous envoyez les fiehiers 
a partir des modules oil vous travaillez, sans passer par le module Fichier. L'administrateur 
peut, de maniere centralisee, configurer I'interface backend pour chaque utilisateur et chaque 
groupe. La validite de certains parametres peut etre limitee dans le temps (cf. chapitre 4.8.2). 

Si l'administrateur ne I'a pas deja fait, vous devez saisir votre nom et adresse email dans la 
section « Donnees personnelles ». Certaines extensions, telles que le module News, utilisent 
ces informations afin de determiner automatiquement I'auteur des nouvelles entrees. Cochez 
la case en bas du formulaire afin d'etre informe par email chaque fois que quelqu'un s'identifie 
sous votre nom d'utilisateur. 



Aide 

Le module Aide peut comprendre plusieurs sous-modules. En regie generale, les sous-modules Reference 647456 
Sur les modules, A propos de TYP03 et Manuel sont actives ; le premier presente la fonc- 
tion principale de chacun des modules, le deuxieme contient des informations a propos de la 
version utilisee et des droits d'auteur, et indique les termes de la licence de TYP03. 

Afin que la description de toutes les sections relevant du redacteur ainsi que de leurs options 
d'entree soit toujours disponible, le « Manuel du redacteur » peut etre integre dans le backend 
a titre d'extension. 



3.4 Le module utilisateur — > centre de taches comme 
centre de communication 

Ce module de TYP03 propose plusieurs outils, facilitant I'edition de contenu dans le cadre 
plus large d'un workflow, et permettant d'acceder rapidement a certaines actions et a cer- 
tains elements de contenu a partir de I'arborescence des pages. II offre aussi des fonctions 
importantes pour simplifier et concentrer les taches dans une partie du systeme. 

Si le module est appele via Utilisateur — > Centre de taches, I'aire de navigation affiche les 
fonctions de selection. Nous les reprenons ici en detail dans I'ordre ou el les apparaissent. 
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Figure 3. 7: 

Aire de navigation du 
module Utilisateur — » 
Centre de taches 

(exemple) 
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Note rapide 

Reference 740912 Le champ de saisie offre a I'utilisateur backend un espace pour ses commentaires, ses notes 
ou d'autres textes. Leur presence sera rappelee a I'utilisateur lors de I'ouverture de sa pro- 
chaine session. Ces entrees ne sont pas visibles pour les autres utilisateurs (a I'exeeption de 
I'administrateur). 

Pages recentes 

La fonction Pages recentes dresse, dans I'aire de navigation, une liste de liens vers les dernieres 
pages editees par I'utilisateur. Si vous cliquez directement sur Montrer les details de toutes 
les preselections, une liste des enregistrements frequemment edites s'affiche, dans I'ordre 
chronologique de leur modification. 

Actions 

Reference 748421 L'administrateur a la possibility d'assigner des actions predefinies a certains utilisateurs ou a 
des groupes d'utilisateurs a I'aide des « actions ». Les types d'actions repris ci-dessous font 
reference a leur fonction, et non au nom sous lequel Taction est affichee dans le module 
Utilisateur — > Centre de taches. 

Creer un utilisateur backend 

Un redacteur peut creer ici un nouveau compte utilisateur backend avec seulement 
quelques informations et sans les droits d'administrateur. L'administrateur peut assigner 
lui-meme un nom aux commandes (ex. : « Creer un nouveau responsable produits » en 
utilisant la commande de type « Creer un utilisateur backend »). 

SQL Query 

Cette fonction est utile si vous desirez obtenir dans un format predetermine des donnees 
en provenance directe de la base de donnees, par exemple, les enregistrements de pro- 
duits ou de transactions, puis les exporter en format CSV ou XML afin de les utiliser dans 
d'autres applications. 

Record list 

El le montre les enregistrements associes a differents endroits de I'arborescence des 
pages, afin d'y acceder directement dans la vue detaillee du module Web — » Liste. 

Edit records 

Cette fonction cree une liste d'elements (page, contenu, autre enregistrement) depuis 
n'importe quelle position dans I'arborescence, et les rend disponibles pour un traitement 
rapide. 

La creation d'actions est vue plus en detail a la section 4.10. Lorsque vous entreprenez une 
action, la vue detaillee vous montre le type d'action, la description de celle-ci, ainsi que I'en- 
registrement qui sera cree ou modifie. 
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Type: 



Edit records 



SELECTIONNEZ U 

Q Portail 
J""*! Evenements 
Q Produits 



Figure 3.8: 

Vue detaillee d'une 

action d'edition de 

page 



Messages 

Dans la section Messages, le redacteur retrouve un systeme simplifie de messagerie pour la 
communication interne au projet. Le redacteur peut I'utiliser pour envoyer (ou recevoir) des 
messages internes a des membres individuels ou a des groupes. Les nouveaux messages sont 
affiches dans le module Utilisateur — > Centre de taches et enregistres dans la boite de 
reception [1]. Les messages qui y sont enregistres peuvent etre deplaces vers une archive ou 
effaces [2], Si un message doit etre lu par un utilisateur avant son prochain acces au backend, 
il est possible de le lui envoyer directement sur son adresse email. Cela implique bien sur que le 
serveur Web ait aussi un serveur email. On peut repondre aux messages recus [3] en reprenant 
I'original [4]. 
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Figure 3.9: 
Vous avez un 
message : bofte de 
reeeption [1], 
deplaeer ou effaeer 
les emails [2], 
contenu du message 
[3], repondre au 
message [4] 
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laches 

La section Taches contient les workflows que I'administrateur definit pour les redacteurs. 4 
Dans la barre de navigation sont affichees les taches « a faire ». En fonction des droits accordes 
a I'interieur d'un workflow, un redacteur peut etre autorise a initier de nouvelles taches. Un 
auteur peut uniquement effectuer un changement de statut dans le cadre d'une etape bien 
definie du processus, ou autoriser un enregistrement pour sa publication. 

La vue detaillee (troisieme colonne) reprend vos elements a faire, vos elements a faire pour 
d'autres utilisateurs [2] -pour autant que le redacteur ait les permissions requises- et I'affi- 
chage des details pour I'enregistrement selectionne [3]. Le log de status indique toutes les 
etapes par lesquelles I'enregistrement est passe jusqu'a son etat actuel, avec la possibility 
d'editer I'enregistrement. Si le redacteur a modifie son enregistrement, ou si certains obstacles 
surgissent, il y ajoute alors un nouveau statut aceompagne d'un commentaire. L'enregistre- 
ment passe alors une etape supplemental dans le workflow [5]. Seuls les gestionnaires de 
taches sont habilites a initier un nouveau workflow [6]. 



Figure 3.10: 
Edition d'un 
enregistrement a 
partir du workflow 
via le module Centre 
de taches 
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4 La creation de workflows est deerite a la section 4.9. 
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3.5 Les pages, receptacles de contenu 

3.5.1 Structure d'un site, arborescence et elements de contenu 

Avant de presenter les taches principales du redaeteur (ereer des pages et du contenu), nous 
developpons d'abord le concept de base de TYP03. Nous passons par cette etape, non pas pour 
aborder les aspects techniques de TYP03, mais principalement pour a) bien manipuler la notion 
d'arborescence lors de la creation d'un site, cette derniere se materialisant sous la forme de 
menus dans le frontend, et b) comprendre la relation entre les elements de contenu et la page 
qui les contient. 

Pour illustrer notre propos, nous avons choisi comme exemple une petite application du site 
B2C classique. Celle-ci contient deja plusieurs pages de differents types (voir fg. 3.11). Nous 
modifierons graduellement cette application au cours des explications. Nous vous encou- 
rageons a I'utiliser afin de vous exercer. A la section 5.9, une variante de I'application du 
site B2C nous servira de base pour expliquer la configuration et les developpements plus 
avances du frontend. L'arborescence du site est constitute de pages individuelles, telles que 
« Accueil », « Produitl », « Contacts*, et des sections principales telles que « Actualites », 
« Evenements», et « Produits ». 
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Figure 3.11: 
Arborescence du site 
exemple 



Arret: date lliture 



Cacher la page: active 



Acces (qroupe B2B) 
Acces fgroupe B2E) 



La page en tant que telle ne contient pas information ! El le sert simplement de receptacle aux 
elements de contenu qui lui sont assignes. Le redaeteur travaillant dans TYP03 doit rarement 
s'inquieter de questions techniques ; tout ce qui lui importe est de connaTtre la position, I'ordre 
et le type dans lesquels il doit creer de nouvelles pages et sous-pages dans l'arborescence, et 
comment les deplacer si necessaire. Le reste des manipulations est pris en charge par TYP03 
en interne. 
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3 TYP03 pour les redacteurs 



Chaque page a un numero d'identification unique (ID). II apparaTt quand vous placez votre 
souris sur I'icone d'une page, et est aussi visible dans le formulaire d'edition d'en-tete de page. 
Par exemple, a la figure precedente, la page « B2C Accueil » a comme ID : 56. 

Le redacteur n'a pas besoin de eonnaitre les numeros d'identification, meme s'ils jouent un 
role crucial en arriere-plan. Les liens internes de TYP03 utilisent ces ID en guise de references. 
L'avantage est que les liens demeurent meme si la page change de position, puisque les ID ne 
changent jamais. 

La structure du site est reprise dans I'arborescence. Le principe de hierarchie devrait etre fami- 
lier aux utilisateurs de PC. Vu d'une certaine maniere, I'arbre tient sur sa tete : le globe (tout 
en haut de I'arborescence) forme les racines (appelees « Rootline » dans le jargon TYP03). 
Les pages, considerees comme les branches, peuvent etre ajoutees n'importe oil dans I'ar- 
borescence. Les pages individuelles, voire meme toutes les branches de I'arbre, peuvent etre 
deplacees. Cette structure est identique a eel le qui permet de naviguer sur le site, puisqu'elle 
est a la base de la creation des menus. 

Les icones presentes dans I'arborescence indiquent de quel type de page il s'agit. TYP03 prevoit 
deja un certain nombre de types de pages predefinis, qui different par leur comportement et 
leur fonctionnalite. Les icones reprennent aussi d'autres caracteristiques, telles que les pages 
cachees, les droits d'acces et la periode d'affichage. Nous expliquons plus en detail ci-apres les 
differents types de pages ainsi que les autres fonctionnalites. 



3.5.2 Creer et editer de nouvelles pages 

Reference 195486 Creer de nouvelles pages avec TYP03 est tres simple : selectionnez le sous-module Page ou 
Liste dans le module Web. L'aire de navigation presente alors I'arborescence avec toutes les 
pages auxquelles vous avez acces. Afin de creer une nouvelle page, affichez le menu contextuel 
en faisant un die droit sur I'icone de la page a laquelle la nouvelle page se rattachera. Cliquez 
ensuite sur Nouveau. Dans la vue detaillee, des pages ou du contenu peuvent etre crees de 
differentes facons, en fonction des extensions installees et des droits d'acces au systeme. Selon 
I'endroit oil vous souhaitez inserer votre page, selectionnez Page (Dans) (la page est creee a 
un niveau inferieur) ou Page (Apres) (la page est creee au meme niveau). Si vous preferez 
creer la page via I'assistant, il vous faut definir sa position en cliquant sur une fleche de 
positionnement. 

Apres avoir determine la position, le formulaire de creation de page s'affiche dans la vue 
detaillee. La structure de base de cette vue detaillee est la meme pour toutes les pages et les 
elements de contenu : I'en-tete et le bas de page affichent des icones pour enregistrer un 
document (disquette), pour enregistrer et visualiser (disquette avec une loupe), enregistrer et 
fermer (disquette avec une croix), annuler le dernier changement (croix) ou supprimer I'en- 
registrement (corbeille avec un losange jaune « attention »). Si I'enregistrement a deja ete 
modifie, les etapes d'edition peuvent etre annulees en cliquant sur I'icone d'annulation (fleche 
bleue). A I'aide des deux menus deroulants, vous pouvez soit passer d'un enregistrement a un 
autre, soit entreprendre des actions telles que « enregistrer le document » ou « vider la cache 
de cette page » [1]. 



92 



3.5 Les pages, receptacles de contenu 
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Figure 3. 12: 
Menu eontextuel pour 
la page « Produit 3 » 
[1] Vue detail lee [2] 



Specifiez le type de page et saisissez les informations obligatoires (marquees d'un carre jaune 
« attention » si le champ correspondant n'a pas ete rempli) dans les champs. Ces derniers sont 
organises en blocs ; tous les types de pages ont en eommun le bloc determinant son type [2], 
le titre de la page [3], les parametres de localisation [4] et les options generales [5]. 
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Figure 3. 13: 
Vue detaillee avec 
formulaire de 
creation d'une 
nouvelle page (type 
standard! Les 
champs TSConfig ef 
Page de Stockage des 
Enregistrements 
Generaux ne sont pas 
visibles ici pour le 
redacteur 
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3 TYP03 pour les redacteurs 



Type 

TYP03 offre une serie de types de page predefinis, ce qui simplifie le travail quotidien. lis 
different surtout par leur fonctionnalite et par leur apparenee dans le frontend. Les types les 
plus importants pour le redaeteur sont Standard et Avance. Le bloc contient aussi le champ 
Cacher la page, qui determine si une page est visible en ligne ou non. Si une page est invisible 
dans le frontend, son icone represente une page blanche avec une croix rouge. 

Titre de la page 

Le Titre de la page est le seul champ qui doit obligatoirement etre rempli lors de la creation 
d'une nouvelle page. Parmi les options avancees (type de page : Avance), vous pouvez assigner 
un Alias a la page, et ensuite I'appeler en specifiant I'URL http://www.votredomaine.com? 
alias. 

En regie generale, les pages sont « cachees » - elles sont entierement generees par TYP03 et 
le resultat est enregistre dans la base de donnees. Pourquoi? Parce que la generation d'une 
page requiert du temps et des ressources de la part du serveur, alors qu'une page provenant 
du cache est servie beaucoup plus vite. Afin de maintenir les pages cachees a jour, elles sont 
normalement regenerees apres un delai de 24 heures. Cet intervalle peut etre modifie indivi- 
duellement par I'administrateur pour chaque page. Le redaeteur peut toutefois - en supposant 
qu'il en ait les droits - les redefinir, voire decider qu'elles ne soient pas cachees du tout (sans 
cache). 

Cette fonction peut etre necessaire pour des pages dont le contenu change d'une minute a 
I'autre (par exemple : valeurs boursieres ou forum). 

Parametres de localisation 

On determine ici si la page est traduite vers la langue par defaut, ou si elle demeure invisible 
tant qu'elle n'est pas traduite. 

Options generales 

On y definit le comportement de la page pour laquelle I'affichage est limite dans le temps, ou 
pour laquelle I'acces est limite a certains utilisateurs. Lancement indique le moment oil la page 
sera mise en ligne automatiquement (rendue visible) et Arret indique quand elle redeviendra 
invisible. 

Les champs de dates indiquent la date sous la forme « jour-mois-annee », par exemple « 10- 
07-2005 ». Une astuce : si vous entrez d et passez au champ suivant en appuyant sur la touche 
de tabulation, la date du jour s'affiche automatiquement dans le bon format. Si vous voulez 
publier la page par exemple dans 14 jours, il vous suffit de taper d+14. Le menu deroulant 
Acces permet de determiner si I'acces a une page du frontend sera limite a certains groupes 
seulement, et si une page sera visible ou invisible apres I'identification dans le frontend. L'op- 
tion Inclure les sous-pages permet d'appliquer la configuration de la page selectionnee (Lan- 
cement, Arret et Acces) a toutes les sous-pages de celle-ci. 
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3.5 Les pages, receptacles de contenu 



Une aide contextuelle assoeiee a chacun des champs est disponible en cliquant sur l'icone 
representant un point d'interrogation. L'icone montrant un formulaire et une main [6] af- 
fiche des champs optionnels dans la barre grise au-dessus de la vue detaillee (non repris dans 
la figure). En cochant les cases en bas de page [7], vous modifiez I'affichage du formulaire 
d'edition de la page et de tous les elements de contenu texte qui s'y rapportent. Une courte 
description des champs apparaTt si la case Afficher la description des champs est cochee. La 
case Afficher les options secondaires (palettes) affiche les champs optionnels directement 
dans la vue detaillee. Vous pouvez des lors choisir d'avoir une version simple et nette du for- 
mulaire, ou d'afficher toutes les options disponibles de facon permanente. La case Desactiver 
I'editeur de texte avance permet d'activer ou de desactiver Rich Text Editor pour tous les 
elements d'une page utilisant celui-ci comme option. 

3.5.3 Differents types de pages 

Le type de page sert tout d'abord a determiner si une page est visible dans le frontend et af- 
fichee dans le menu, ou si el le sert seulement de dossier invisible pour entreposer I'information 
du backend. L'icone de la page dans I'arborescence indique I'usage auquel el le est reservee. 



Standard 

Le type Standard suffit generalement ; il offre une selection des informations les plus impor- 
tantes d'une page, comme mentionne plus haut. Si vous passez de ce type de page a un autre 
comportant des options additionnelles ou differentes, celles qui ne sont pas reprises dans le 
type Standard ne sont pas perdues. Ainsi si vous avez rempli des champs disponibles seule- 
ment dans le mode Avance et que vous passez au mode Standard, les donnees resteront 
disponibles si vous retournez au mode Avance. D'un point de vue technique, les types de page 
ne sont que des interfaces affichant differentes parties d'une meme table de base de donnees 
(Pages). 



Avance 

Le type Avance offre des avantages considerables : on y specifie la meta-information et on y 
integre des dossiers ou des plugins. Vous pouvez aussi specifier un titre different du titre de 
navigation pour chaque page, afin que cette derniere apparaisse dans le frontend sous un titre 
different de celui qui lui est attribue dans le backend. 

Les champs de meta-information tels que Resume, Mots-cles et Description sont importants 
pour les moteurs de recherche externes ainsi que pour la fonction de recherche de TYP03. II 
est aussi recommande de donner aux pages un titre en rapport avec son contenu. 

Un certain nombre d'extensions doivent etre integrees directement dans la page via Contient 
le plugin afin de bien fonctionner. Si des fichiers doivent etre integres depuis le gestionnaire 
de fichiers ou depuis votre PC via le navigateur d'elements, leur affichage et leur mise en forme 
dependent de la configuration du gabarit. 
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3 TYP03 pour les redacteurs 



Figure 3. 14: 
Integration 
d'elements via le 
navigateur 
d'elements [1] ou la 
fonetion « Parcourir » 
[2] 
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En fonetion de la taehe, vous pouvez explorer les pages ou les repertoires du systeme de fichiers 
avec le navigateur d'elements, par exemple pour integrer des enregistrements, placer des liens 
ou ajouter directement des fichiers (ex. : images, videos, son, version imprimable). Selectionnez 
un seul fichier en cliquant sur son titre ou un groupe de fichiers en cliquant sur le symbole 
« + ». 



Figure 3. 15: 
Navigateur 
d'elements aeeedant 
au systeme de 
fichiers : 
arborescenee [ 1 ], 
selection de fichiers 
en cliquant sur le titre 
ou le signe « + » pour 
une selection groupee 
[2], chargement des 
fichiers dans le 
systeme de fichiers 
[3] 
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URL externe 

Reference 132947 Le type de page URL externe renvoie a une adresse externe de type Internet, FTP ou email. 

La page en tant que telle n'a pas de contenu, mais est utilisee pour integrer des liens vers des 
applications externes dans la structure du menu du frontend. Entrez I'adresse et le type de 
protocole. 

Figure 3.16: 
URL externe 




Dans certains cas, il peut etre interessant de specifier une adresse URL interne, pour specifier 
dans I'adresse des arguments a passer a un plugin, par exemple pour faire un lien direct vers 
une page d'actualites en tant que nouvelle page, etc. 
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Raccourci 

Le type de page Raccourci (lien) a la meme fonction, la seule difference est qu'elle renvoie a 
une page interne. Dans notre exemple, la page « Accueil » correspond a ce type. On I'utilise 
quand la page apparait dans les menus du frontend sans avoir de contenu propre. 

Ce type de page propose deux modes pour definir la page cible : 

1. Le navigateur d'elements peut definir un renvoi a une page ou a un element de contenu 
speeifique. 

2. Dans la fonction Mode raccourci (options avancees), on peut creer un lien vers la 
Premiere sous-page ou une Sous-page aleatoire. 

Dans notre exemple, la premiere methode a ete utilisee pour lier la page racine « B2C Accueil » 
a la page « Accueil ». 



Reference 524611 




Le navigateur d'elements s'utilise dans le contexte de I'arborescence de pages a la maniere d'un 
navigateur defichier. Ce concept utilisateur est present uniformementdansTYP03, meme dans 
le Rich Text Editor, afin de maintenir les liens manuellement. Le navigateur d'elements simplifie 
la recherche rapide d'une page ou d'elements de contenu a I'aide de mots-cles. 



Figure 3.17: 
Raccourci via le 
navigateur 
d'elements [1] ou le 
Mode raccourci [2] 
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Figure 3.18: 
Le navigateur 
d'elements fait un 
lien vers des elements 
de contenu ou une 
autre page via un 
raccourci : 
arborescence de 
pages [1], selection 
d'enregistrements a 
I'aide du titre ou de 
« + » [2] 



Hors menu 

Le type de page Hors menu est celui qui s'apparente le plus au mode Avance en termes de Reference 157087 
champs. Ce qui le distingue toutefois est son comportement dans le frontend : la page peut 
etre appelee directement via son numero d'identification, mais el le n'est pas reprise dans le 
menu. Dans notre exemple, la page « Nouveautes-Details » est de ce type. 
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Section utilisateur backend 

Les pages de la Section Utilisateur Backend ne sont visibles dans le frontend que pour les 
utilisateurs deja identifies dans le backend. Ces pages necessitent elles aussi des droits de 
lecture, et leur affichage dans le frontend ne peut etre appele que via le backend. 

Ne confondez pas le backend avec les pages du frontend reservees a certains visiteurs par un 
mot de passe. Ces dernieres ne sont pas controlees via le type de page, mais par le champ 
Acces de chacune des pages et des elements de contenu. 

Point de montage 

Le type de page point de montage ajoute vers une page cible un raccourci (analogue aux 
liens symboliques connus des utilisateurs UNIX) a I'endroit oil il est insere. Cela permet, non 
seulement de definir la page eiblee dans le champ du point de montage (avance) en utilisant 
le navigateur d'elements, comme pour une page de type raccourci, mais en plus de garder le 
format defini pour la page a afficher (meme si la page cible utilise un graphisme completement 
different). 

Ces pages sont affichees via des parametres ajoutes a chacune des pages : 

index.php?id=13&MP=8-81 

ce qui correspond a la syntaxe suivante : 

index.php?id=[poge appelee]ScMP=[page cible]-[page a afficher]. 

De cette maniere, vous definissez une reserve de contenus communs dans lesquels differents 
sites Web peuvent puiser. Le contenu est affiche dans le graphisme propre a chaque site. 

Delimiteur 

Les pages de type Delimiteur servent a structurer les menus. Dans le menu frontend, le titre 
de la page apparaTt mais ne renvoie pas a celle-ci. Vous pouvez done par exemple creer des 
en-tetes temporaires dans les menus. Bien sur, I'affichage doit deja etre defini dans TypoScript 
par le developpeur. 

Dossier systeme 

Le Dossier systeme sert essentiellement de receptacle pour les enregistrements et n'apparait 
pas dans le frontend. II peut servir aux pages et aux elements de contenu, mais ces dossiers sont 
surtout prevus pour administrer et structurer les enregistrements ne devant pas apparaitre 
dans le frontend (ex. : categories pour I'extension des actualites, par lesquelles les messages 
sont classes, ou la liste de tous les utilisateurs frontend et des groupes). Dans notre exemple, 
la page « Fonctions » est de type Dossier systeme. 

Cependant, on peut aussi creer des sections entieres d'une page dans un Dossier systeme, 
s'il est prevu qu'elles n'utilisent pas la procedure automatique de creation de menu. La sec- 
tion « Dates individuelles » contient des pages creees dans notre application B2C, afin d'etre 
selectionnees dans la zone de contenu. 
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3.6 Insertion d'elements de contenu dans TYP03 



Corbeille 



La Corbeille se comporte comme un Dossier systeme, a la difference que son champ d'ap- 
plication est symbolise par sa propre icone. La corbeille de TYP03 a son propre type de page 
pour permettre aux utilisateurs backend de deplaeer des enregistrements sans les supprimer 
immediatement. Les enregistrements ne sont done pas deplaces automatiquement vers ce 
dossier lorsqu'ils sont effaces ! 

Une fois les enregistrements supprimes, vous n'y avez plus acces. S'ils sont conserves dans 
la corbeille, ils peuvent etre recuperes et retravailles a tout moment. Vous pouvez restituer 
les elements a leur place dans I'arborescence a I'aide de la fonction annuler ou a I'aide de 
I'historique. 



Jusqu'a present, nous avons vu que les pages fournissent I'ossature sur laquelle TYP03, en 
tant que systeme de gestion du contenu, peut integrer tous les elements de contenu voulus. 
A I'interieur d'une page, les elements de contenu sont classes par colonnes et par langues. 
Le concept de colonne permet de regrouper certains elements de contenu de la page pour 
ensuite les placer via les gabarits dans des zones precises du frontend. Par exemple, un gabarit 
peut prevoir une separation dans le frontend entre une zone principale et une zone secondaire 
(ex. : pour un message defilant ou une autre application). Chaque page peut contenir un 
nombre illimite d'elements de contenu. L'ordre suivant lequel le frontend affiche les elements 
de contenu correspond a l'ordre dans lequel ils sont inseres dans les colonnes du backend 
(module Page — > Colonnes). 



Figure 3.19: 
Affichage de deux 
zones de contenu 
dans le frontend et la 
vue detaillee 
eorrespondante du 
backend (Module : 
Page — » Colonnesj 



3.6 Insertion d'elements de contenu dans TYP03 
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3 TYP03 pour les redacteurs 



TYP03 prevoit quatre colonnes par defaut : Gauche, Normal, Droite et Bordure. II est rare que 
les quatre colonnes soient utilisees d'emblee, mais de nouvelles zones pourraient etre ajoutees 
ou d'anciennes renommees lors de la mise en ceuvre du site. De plus, I'administrateur peut 
determiner a quelle zone chaque redacteur a acces, et desactiver les colonnes non utilisees. 

Concernant la gestion des langues, TYP03 presente un mode de fonctionnement similaire : 
la meme page peut supporter du contenu edite dans differentes langues. Dans ce cas, les 
elements de contenu sont filtres en fonction du choix de la langue, et affiches en entier dans 
le backend, dans le module Page — > Langues. La gestion de sites Web multilingues est reprise 
plus en detail dans la section 3.10.8. 



Figure 3.20: 
Vue detaillee du 
backend pour la 
gestion des langues 
(module : Page — » 
colonnes) ; seules les 
colonnes Normal et 
Droite et leurs 
elements de contenu 
sont repris 
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3.6 Insertion d'elements de contenu dans TYP03 



3.6.1 Creation et edition de nouveaux elements de contenu 



Le formulaire pour la creation de nouveaux contenus est fort semblable au formulaire de 
creation de page : cliquez sur Nouveau dans le menu contextuel de I'arborescence de pages 
du module Web. Les types de donneesdisponibles apparaissent dans la vue detaillee. Choisissez 
maintenant Cliquez ici pour I'assistant ! , et determinez le type et la position de I'element de 
contenu dans la page. 



Reference 533277 



0' 



ll SELECTIONNEZ LE TYPE D'ELEMENT DE CONTENU: 



Veuillez selectionner le type de contenu de page vous souhaitez creer: 



| ^~ | Element texte normal 

l ^= l Un element texte requlier avec des champs d'en-tete et de corps. 
|==| Texte avec image en dessous 

■ avec un champs qui peut contenir un certain 



d'lf 



onees en dessous. 



] =Q | Texte avec une image a droite. 

I=l Cornmie le precedent mais rimaoe est habillee de texte et se trouve sur la 
droits 




) |uc=i| Formulaire d'identjfication 

J Formulaire de connexion/deconnexion pour les utilisateurs website. C'est 
utilise pour proteqer certaines pages par mot de passe. Vous devez creer 
des utilisateurs et des qroupes website pour que ceci fonctionne. 



Figure 3.21: 
Assistant pour la 
creation de contenu : 
choix du type [1] et 
de la position [2] du 
nouveau contenu 



Plugins 

I I Pluqin General 

I | Si vous voulez inserer un pluqin qui ne se trouve pas dans la liste 

ci-dessous, selectionnez ce pluqin et en attendant de pouuoir choisir (dans 
une liste deroul ante i '.'otre pluqin specifique, 



2: SELECTIONNEZ SA POSITION: 

Maintenant, cliquez a I'endroit oil vous souhaitez placer le contenu dans la page: 



IS" 



fjNouvelles 



BO 



La vue detaillee qui apparait pour la creation de nouveaux elements de contenu ressemble au 
formulaire de creation de page : I'en-tete contient la barre de menu [1], et en pied de page, 
on peut ajuster les options de visualisation et d'edition pour les sections du formulaire [5]. Si 
I'editeur de texte Rich Text Editor est desactive pour les elements de contenu Texte et Texte 
ft image, il n'y a plus de mise en forme du texte dans I'interface d'edition. Ceci peut etre tres 
utile si par exemple on veut verifier les balises inserees par le Rich Text Editor dans le code 
source. 

Les differents types de contenu ont tous dans leur formulaire les memes sections pour specifier 
le Type [3], I'En-tete [3] et les Options generales [4]. Si les options secondaires (palettes) pour 
les champs sont desactivees, el les peuvent etre affichees en cliquant sur les icones correspon- 
dantes [6]. 
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Figure 3.22: 
Formulaire de 
creation d'elements 
de eontenu texte 



hi sal si .xj 



H 



Is 



,_ r 



Cachtri L i r : 



r 1 - 



I" la 



Type 

Dans le formulaire de creation de nouveau eontenu se trouve une liste reprenant les di- 
vers types de eontenu (reprise sous le terme technique CTypes), allant du simple element de 
texte aux elements multimedias. Lorsqu'on modifie le type de eontenu, I'affichage des champs 
s'adapte automatiquement en fonction des caracteristiques de ce type. 
Les types sont presentes individuellement plus bas. Lorsque vous saisissez des donnees dans les 
champs de la section Type du formulaire, il est important d'associer le eontenu a une Colonne 
specifique - et, pour les applications multilingues, de I'associer a la Langue correspondante. 
Ces champs sont accessibles via les options secondaires. Avant et Apres determinent I'espace 
(en pixels) entre cet element de eontenu et respectivement ceux qui le precedent ou le suivent. 
Grace au champ Cadre, vous pouvez indenter, cadrer, specifier une couleur de fond ou souli- 
gner votre element. La case a cocher Index determine si I'element est repris dans le plan du 
site de type Index des sections (Contenu w/lndex coche) - par exemple lorsque le texte est 
trop long pour etre affiche dans son ensemble. Vers le haut ajoute un petit lien de retour vers 
le haut de la page lorsqu'il est active. II vous permet de retourner vers le haut de la page en un 
seul die au lieu de recourir a la barre de defilement. 



Figure 3.23: 
Section Type du 
formulaire de 
creation de eontenu 




En-tete 

Lorsqu'il est affiche, I'en-tete est generalement mis en relief par rapport au reste de I'element 
de eontenu en recourant a des caracteres gras. Le champ Type offre plusieurs possibilites de 
mise en forme pour I'en-tete. 
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Si vous ne voulez pas que I'en-tete s'affiche sur votre site, activez I'option Cache du champ 
Type. Les autres champs permettent d'aligner I'en-tete (gauche, centre, droite) ou d'ajouter un 
lien ou une date. Certains types d'elements de contenu tels qu'lnserer enregistrements ou 
HTML, ne presentent pas d'en-tete ni d'options secondaires s'y rattachant dans leur configu- 
ration de base. Ces types de contenu ne presentent que le champ Titre. 

UJ en-tto: ~ Figure 3.24: 




Section En-tete du 
formulaire 



Options generales 

A I'instar des Options generales pour I'edition des pages, les elements de contenu peuvent 
eux aussi etre rendus invisibles grace a la fonction Cacher. Les champs Lancement et Arret 
determinent une publication limitee dans le temps. Avec Acces, il est possible de restreindre la 
visualisation a certains groupes d'utilisateurs frontend. 



Option. q<oc. .l> 








rrj) r| 




0 r~ 





3.6.2 Types de contenu 

Meme dans sa version simplifiee, TYP03 offre toute une gamme de types de contenu couvrant 
les cas typiques d'insertion sur une page HTML. Vous pouvez ajouter de nouveaux types de 
contenu en developpant des extensions. Les pages suivantes presentent les principaux types 
accompagnes d'exemples. Les points plus particuliers tels que la mise en forme personnalisee 
de types de contenu pour I'affichage dans le frontend sont repris au chapitre 6. 



Figure 3.25: 
Section Options 
generales du 
formulaire 



S Titre 

H Texte 

l§§ Texte & Image 

(gj Image 

Liste a puces 
Bill Tableau 
^5 Lien uers un fichier 
gj| Multimedia 
^ Formulaire 



^ Recherche 

^ Identifiant 

[t"^ Textbox 

E'g] Menu / Plan site 

Inserer enregistrements 

£JH] Inserer un plugin 

^ Script 

^ Separation 

m HTML 



Figure 3.26: 
Types de contenu 
dans le backend 



Titre 

Cet element de contenu est rarement utilise : en effet, il est deja integre dans la plupart des 
autres elements de contenu. II ne differe de ces derniers que par I'ajout d'une option pour 
I'insertion d'un sous-titre et une variete de mises en page. 
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Texte 

Le type de contenu Texte est tres frequemment utilise pour des passages de texte. On insere 
I'element dans le champ Texte et on I'ajuste a I'aide des cases a cocher Gras, Italique, Sou- 
ligne et Majuscule ou des options secondaires Alignement, Police, Taille et Couleur. La mise 
en forme s'applique ici au texte dans son ensemble : si vous souhaitez seulement rearranger 
des passages isoles (ex. : ajouter des liens ou des images), utilisez le Rich Text Editor. 



Figure 3.27: 
Type de contenu 
Texte : section 
d'insertion du 
formulaire 
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Image 

Reference 550518 Les images sont normalement inserees dans une page via les elements Image ou Texte & 
image. Pour y parvenir, selectionnez les images dans la gestion des medias du systeme a I'aide 
du navigateur d'elements, ou chargez-les directement a partir de votre reseau local a I'aide du 
bouton Parcourir. La fonction Alignement determine sa position (aligne a gauche, a droite 
ou centre). Le type de contenu Texte ft image definit directement la position de I'image par 
rapport a celle du texte. 

Si vous desirez utiliser plusieurs images, vous pouvez les disposer dans un tableau invisible a 
I'aide de I'option Colonnes. La hauteur des lignes du tableau s'ajuste a la taille de I'image la 
plus grande qu'elles contiennent. Cet ajustement automatique peut etre desactive en cochant 
la case Pas de ligne. Un tableau sera alors insere pour chaque ligne, dont les proportions 
s'ajustent a toutes les images qu'il contient. Vous pouvez aussi afficher un cadre autour de 
I'image en activant la case a cocher Bordure (pour accentuer le contraste par exemple). 



Figure 3.28: 
Type de contenu 
Image : integration 
d'elements d partir du 
gestionnaire de 
fichiers via le 
navigateur 
d'elements 
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TYP03 peut integrer des images de n'importe quel format et les editer a I'aide de ses propres 
fonctions graphiques. Vous pouvez ainsi en modifier la faille, la qua lite et le format. 

Vous pouvez determiner la taille de I'image avec les champs Largeur et Hauteur (en pixels). 
Qualite permet en plus de definir son format (GIF, PNG, JPG), la profondeur de ses eouleurs ou 
son taux de compression. Vous avez meme la possibility de retravailler les images et leurseffets 
apres une premiere sauvegarde. Vous pouvez ajuster le contraste, eclaircir, aiguiser, normaliser, 
convertir en nuances de gris et leur faire subir une rotation de 90° ou de 1 80°. 

Des cadres peuvent etre crees pour les images simplement en utilisant les balises HTML, mais 
on peut aussi creer des cadres a partir d'images (cf. figure suivante). Ces images de cadres 
sont disponibles dans le menu deroulant Frames. L'installation par defaut propose deux series 
d'exemples, « Artists » et « Darkroom » dans le repertoire tslib/media/frames/. lis peuvent 
bien sur etre personnalises lorsque le developpeur configure le systeme (cf. styles.content.img- 
Frames dans le gabarit standard styles.content (default)). 




Figure 3.29: 
Ajout de cadres d 
I'aide de I'image de 
cadre 2 de la serie 
« darkroom » 



Dans le frontend, I'image peut renvoyer a une adresse URL specifiee dans le champ Lien. Si 
vous cochez I'option Cliquer pour agrandir, I'image apparait a sa taille initiale dans une 
nouvelle fenetre lorsqu'on clique sur I'image miniature. 

Le Titre apparait normalement sous I'image, mais il peut etre deplace (aligne a droite, a gauche 
ou centre) a I'aide de I'option Alignement. Lors de la saisie de titres pour plusieurs images, le 
texte du titre doit etre introduit dans le meme ordre que les images, a chaque fois sur une 
ligne separee. 

Note : Pour associer differents titres a differentes images, la ligne de code suivante doit etre 
rajoutee dans le gabarit : styles.content.imgtext.captionSplit = 1 

Sinon, les titres seront affiches en un seul bloc pour toutes les images. 



Texte ft image 

L'element de contenu Texte ft image est une combinaison des types Texte et Image et com- 
porte des options des deux elements. II offre en plus la possibilite de determiner la position de 
I'image par rapport au texte (y compris I'habillage) a I'aide de I'option Position. 
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Liste a puces 

Reference 552631 La Liste a puces constitue un type de eontenu ideal pour les listes. Chaque ligne entree dans 
le champ texte apparatt comme I'element d'une liste dans le frontend. Les retours a la ligne 
dans un meme element sont indiques avec I'expression HTML <br>. 

Quatre types de Mise en page sont disponibles, qui par defaut utilisent des icones, des 
nombres ou des coches afin de distinguer visuellement les elements, lis peuvent bien sur etre 
redefinis par le developpeur. 

Comme pour le type de eontenu Texte, le eontenu peut aussi etre mis en forme. Les options 
disponibles sont Gras, Italique, Souligne et Majuscule, ainsi qu'Alignement, Police, Taille 
et Couleur. 



Tableau 

Reference 727880 Pour publier un tableau HTML, utilisez le type de eontenu Tableau. Ici aussi, chaque ligne de 
eontenu represente une ligne dans le tableau HTML. Les colonnes dans une meme ligne doivent 
etre marquees par le caractere « | » (le symbole « tube » 5 ). 

Voiei I'exemple d'un tableau de deux lignes et quatre colonnes (le eontenu de la premiere 
colonne est un espace vide) : 

| Colonne 2 | Colonne 3 | Colonne 4 
Ligne 2 | Apud Helvetios. . . | Ea res. . . | Damnatum. . . 

Par facilite, le texte de la deuxieme ligne est ici abrege. En voici le resultat dans le frontend : 



Figure 3.30: 
Exemple de tableau 
utilisant la mise en 
page standard 3 



Tableau 



fcGallia est omnis divisa in 
-partes tres, quarum 

lam incolunt Belgae, 
■ aliam Aquitani.tertiam 
'qui ipsorum lingua 
jCeltae, nostra Galli 
■appellantur. Hi omnes 
" lingua, institutis, legibus 
inter se differunt. Gallos 
_ : ab Aqurtanis Garumna 
'flumen, a Belgis Matrons 
: Jet Sequana dividit 



Horum omnium fortissimi 
sunt Belgae, propterea quod 
a cuttu atque humanitate 
provinciae longissime 
absunt, minimeque ad eos 
mercatores saepe 
commeant atque ea quae ad 
effeminandos animos 
pertinent important, 
proximique sunt Germams, 
qui trans Rhenum incolunt, 
quibuscum continenter 
bellum gerunt 



Colonne 4 

Qua de causa Helvetii 
quoque reliquos Gallos 
virtute praecedunt, quod 
tere cotidianis proeliis cum 
Germanis contendunt, cum 
aut suis finibus eos 
prohibent aut ipsi in eorum 
tinibus beltum gerunt. 
Eorum una, pars, quam 
Gallos obtinere dictum est, 
initium capit a tlumine 
Rhodano, continetur 
Garumna flumine. 



L'apparence du tableau peut etre modifiee dans la section Mise en page. Quatre variantes sont 
disponibles dans la configuration standard, qui permettentd'ajouterde la couleur, par exemple, 
aux titres de colonnes et de lignes. II existe aussi des options pour definir la Couleur de fond, 
la largeur de la Bordure, I'Espacement entre cellules et I'Espacement inter cellules. Le 
nombre de colonnes est soit detecte automatiquement, soit il est defini manuellement via le 
menu deroulant Colonnes du frame. Toutefois, si vous avez limite le nombre de colonnes a 
trois par exemple, le eontenu correspondant a des colonnes depassant le nombre de trois sera 
ignore. 

5 aussi appele « pipe » en anglais 
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La mise en forme du eontenu utilise les memesfonetionsque pour le typeTexte, via les options 
standards et seeondaires. 




Figure 3.31: 
Formulaire pour le 
type de contenu 
Tableau 



Apres avoir enregistre un Tableau une premiere fois, un assistant est disponible afin de sim- 
plifier les modifications ulterieures. Vous I'activez en cliquant sur I'icone se trouvant a la droite 
du champ texte. Une nouvelle fenetre s'ouvre alors, dans laquelle vous pouvez editer, effacer 
et ajouter du contenu au tableau a I'aide d'une interface graphique tres simple d'utilisation. 

Vous pouvez elargir les champs individuels qui vous semblent trap petits, en cas de longs 
extraits de texte, en desaetivant la case a cocher Petits champs. 
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figure 3.32: 
Assistant a la 
creation de contenu 
dans un tableau 



Lien vers fichier 

L'element de contenu Lien vers fichier sert a afficher divers types de fichiers sous forme de Reference 976910 
tableau dans le frontend ; en fonction du type de media, un visiteur peut ouvrir le lien ou 
telecharger de information provenant du systeme de fichiers. 



| Demarrer_avec_Typo3.pdf 21 9 K 

jstepjutzip 14.6K 

Jt3_livre_couverture.png 88 K 

jtypo3logo.gif 2.1 K 

jManuel_du_redacteur.pdf 634 K 



Figure 3.33: 
Exemple du type de 
contenu Lien vers 
fichier applique d 
diffe rents types de 
media s 



Les fichiers peuvent etre facilement integres a I'aide du navigateur d'elements, le bouton Par- 
courir, ou Lire depuis le chemin. Le redacteur selectionne le navigateur d'elements dans la 
section Fichiers, ouvre les dossiers mis a sa disposition, et choisit les fichiers qui I'interessent. 
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II est aussi possible d'envoyer des fiehiers sur le serveur a partir du PC local a I'aide du bou- 
ton Parcourir. Cette methode toutefois ne permet pas de voir les fiehiers dans le navigateur 
d'elements, car ils ne sont pas enregistres dans le systeme sous le repertoire fileadmin/, mais 
sous uploads/media/. 

Pour afficher tous les fiehiers contenus dans ce dossier, vous devez specifier le chemin dans 
Lire depuis le chemin. 



Figure 3.34: 
Formulaire pour le 
type de contenu Lien 
vers fichier 




Ces liens vers les fiehiers peuvent s'afficher de quatre facons differentes dans le frontend 
(via I'option Mise en page). Ces quatre modeles sont preconfigures dans TypoScript, et par 
defaut, ils affichent le titre du fichier avec I'icone associee au type de fichier ou I'image en 
previsualisation. Grace a I'affichage sous forme de tableau dans le frontend, la couleur de fond, 
la bordure, I'espacement entre cellules et I'espacement inter-cellules peuvent etre parametres 
individuellement. 

De I'information peut etre ajoutee au titre du fichier en cochant la case Afficher taille du 
fichier et en remplissant le champ Descriptions. Tout comme pour les titres d'images, la des- 
cription des fiehiers est inseree a chaque fois sur une ligne separee. De plus, une ligne de code 
doit figurer dans le TypoScript du gabarit (styles.content.uploads.descriptionWrap). 



Multimedia 

Reference 986146 A I'aide du type Multimedia, vous pouvez integrer des fiehiers de format TXT, HTML, HTM, 
CLASS, SWF, SWA, DCR, WAV, AVI, AU, MOV, ASF, MPG, WMV, ou MP3 en tant que contenu 
d'une page. Vous les selectionnez dans la section Fichier, soit a I'aide du navigateur d'elements, 
soit directement a partir de I'environnement de travail local en les placant dans le repertoire 
interne du systeme uploads/media/. 

Dans le second cas, la regie s'applique a nouveau : un fichier telecharge vers le serveur de 
cette facon n'apparaitra pas dans le navigateur d'elements, mais n'est lie qu'a cet element de 
contenu. 

Les parametres necessaires a la lecture de videos, de fiehiers audio ou d'animations Flash 
peuvent etre saisis dans le champ Parametres. Nous avons ici comme exemples les parametres 
pour une animation Flash : 

WIDTH=70 
HEIGHT-55 
LOOP=true 
QUALITY-high 
BGCOLOR- #FFFFFF 
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TYPE- "application/x-shockwave- flash" 

PLUGINSPAGE-http : / /www . macromedia . com/ shockwave/download/ index . cgi ? l_Prod_Version= 
ShockwaveFlash; 



Formulaire 

L'element de contenu Formulaire permet de ereer des formulaires email. Un assistant est a Reference 404318 
votre disposition. II utilise la notation suivante : dans la section Configuration, chaque ligne 
correspond soit a un champ du formulaire a creer, soit a une fonction. 

Norn: | *Nom-input , 40 | [Veuillez saisir votre nom] 

Email: | * email-input, 40 

Votre adresse: | Adresse-textarea, 34 , 4 

Mon appreciation de TYP03 : | Vote-radio | Super-super, Genial-genial, 
Inegalable-inegalable 

| f ormtype_mail-submit | Soumettre ! 

| html_enabled-hidden | 1 

| subject-hidden | Mon appreciation de TYP03 

Le formulaire email est affiche sous forme de tableau. Le symbole « | » sert ici aussi a separer 
le titre (description ou commentaire) du type de champ de formulaire et des details de la 
configuration. 



Element 



Premiere 

valeur 

(Titre) 



zone de texte 



Label 



champ texte Label 

mot de passe Label 

fichier Label 

case a eocher Label 

liste deroulante Label 



bouton radio 

champ cache 
envoyer 



Label 



Label 



Deuxieme valeur (type de 
champ) 



Troisieme valeur 
(details de confi- 
guration) 



[*=obligatoire][nom du champ =] 
textarea [colonnes, lignes, 
"wrap=[p. ex."0FF"]"] 
[*=obligatoire ][nom du champ =] 
input [taille max.] 
[*=obligatoire ][nom du champ =] 
input [taille, max ] 
[*=obligatoire ][nom du champ 
(*1)=] file [.taille ] 
[*=obligatoire ][nom du champ 
=]check 

[*=obligatoire ][nom du champ 
=]select [.taille 
(int/"auto"),"m"=multiple ] 
[*=obligatoire ][nom du champ 
=] radio 

[nom du champ =]hidden 
[nom du champ =]submit 



[donnee par defaut] 

[donnee par defaut] 
[donnee par defaut ] 

[coche=1 ] 
Label [=valeur] 

Label [=valeur] 

Valeur 
Legende 



Tableau 3.1: 
Apercu de la 
configuration du 
formulaire 
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Le champ Aller a la page specifie sur quelle page se retrouve le visiteur apres avoir soumis le 
formulaire. Cette page de confirmation doit certainement apparaitre pour informer le visiteur 
que son email a bien ete envoye. 

II est primordial de specifier une adresse email valide dans le champ E-mail destinataire. On 
peut saisir plusieurs adresses en les separant par des virgules. 

Une fois que vous avez enregistre les donnees, I'assistant mentionne plus haut peut etre appele 
en cliquant sur I'icone a droite du champ Configuration. II sert a creer et a configurer plusieurs 
types de champs de formulaires (n'oubliez pas d'enregistrer regulierement I). Dans le bas de 
page de I'assistant, une case a cocher donne la possibilite d'activer le mode HTML pour les 
emails. 

L'assistant se charge ensuite de traduire vos entrees dans la syntaxe propre au formulaire de 
TYP03. 



Figure 3.35: 
Assistant pour la 
creation de 
formulaire et 
affichage dans le 
frontend 
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Recherche 



Un formulaire de recherche simple mais puissant est deja prevu dans la version de base de 
TYP03. II permet a I'utilisateur frontend de rechercher des elements de contenu, des en-tetes 
ou des mots-cles dans le site. Ce formulaire est cree a I'aide du type de contenu Recherche. Si 
vous desirez que les resultats de la recherche soient affiches sur une nouvelle page plutot que 
sur la page du formulaire de recherche, vous devez specifier une page dans le champ Envoyer 
a la page - qui doit deja avoir ete creee (de preference une page de type Hors menu). 



Reference 481291 



Recherche 



Commergants 



Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, 
tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, 
legibus inter se differun... 

Accueil 

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, 
tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, 
legibus inter se differun... 



Chercher: |Beigae 

dans Contenu de la page 



Figure 3.36: 
Formulaire de 
recherche avec les 
resultats affiches sur 
la meme page 



II existe, en plus de la recherche standard, une version plus puissante, I'lndexed Search Ex- 
tension, qui peut etre installee et utilisee au besoin. 



Reference 724882 



Identifiant 



Le formulaire d'identification permet au visiteur qui en a les droits d'acceder aux pages et 
aux elements de contenu du frontend qui lui sont reservees et qui restent done invisibles aux 
autres visiteurs. Le formulaire d'identification est cree a I'aide du type de contenu Identifiant. 
On peut determiner une page sur laquelle I'utilisateur sera renvoye apres s'etre identifie a 
I'aide du navigateur d'elements. Tout cela implique bien sur que les utilisateurs et les groupes 
du frontend aient ete inscrits correctement et que le formulaire d'identification « sache » 
oil les donnees utilisateur ont ete enregistrees. Dans notre exemple, B2B et B2E, les donnees 
utilisateur sont situees dans le dossier systeme FEUtilisateurs. 

Les administrateurs peuvent ajuster ce parametre en utilisant TypoScript (fe_adminLib.pid 
= [uid]) ou en specifiant une seconde page de renvoi comportant les donnees utilisateur. Le 
chapitre 4.1 1 donne plus d'informations sur les utilisateurs frontend et leur configuration dans 
le systeme. 



Reference 673847 
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Figure 3.37: 
Formulaire 
d'identification 



Identifiant 



Nom d'utilisateur [~ 
Mot de passe: |~ 



Textbox 



Le type de contenu Textbox permet au redacteur d'utiliser une mise en page predefinie pour 
introduire du texte. La configuration par defaut prevoit I'insertion du contenu dans un tableau 
de deux colonnes, la colonne de gauche pour I'affichage d'images avec differents cadres, et la 
colonne de droite pour le texte, indente de 30 pixels. La mise en page (chacune speeifiee par le 
developpeur) est selectionnee dans le menu deroulant Type de Textbox. 



Figure 3.38: 
Section d'insertion de 
contenu pour le type 
Textbox 



1 
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L'element suivant a ete cree a I'aide de la configuration par defaut (cf. content (default)) 



Figure 3.39: 
Exemple d'affichage 
dans le frontend pour 
le type de contenu 
Textbox 




Textbox 

Fa TPs est Hehrettis per tndimim enuntiata Monbus sms Orgrtonrrm ey vinnihs rausam rlirere 
coegerunt; damnatum poenam sequi oportebat, ut igni cremarerur Die consnruta causae dichoros 
Orgetonx ad lucbcium omnem suam fam&am, ad hominum miia decern, undique coegit, et omnes 
chentes obaeratosque :uos, quorum magnum numerum habebat. eodem condusat, per eos ne 
causam diccrct sc cnpuit Cum civrtas ob cam rem incitata armis lus suum exequi conarctur 
liiululudmcmque tioiimium ex ajgis ina^istidlus uoxcicnl, Oixeloiix moituus est, ncquc abesl 
suspicio. ut Helvem arbitrantur. qum ipse sibi monem conscwerit 



Menu/Plan site 

Reference 528240 Le Menu/Plan site contient divers elements de contenu facilitant la navigation. On peut y 
creer des menus de navigation, une description du contenu des pages, ou afficher un plan du 
site Web en entier. Selectionnez la fonctionnalite via Type de menu, et choisissez un ou plu- 
sieurs points d'entree pour le menu via Point d'entree. Si aucun point d'entree n'est specifie, 
la page a laquelle se trouve le menu est utilisee par defaut. 
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3.6 Insertion d'elements de contenu dans TYP03 



Type de menu: 



Menu de ces pages 



Menu des sous-pages 
Menu des sous-pages (avec resume) 
Menu des sous-pages (avec section) 
Plan du site 

Index des sections (Contenu w/Index coche) 

Pages recemment mises a jour 

Page en relation (base sur les mots-cles) 



Figure 3.40: 
Differents menus 
pour le type de 
contenu Menu/Plan 
du site 



Les types de menus predefinis sont les suivants : 
Menu de ces pages 

Cree une liste de liens vers les titres des pages selectionnees comme points de depart. 

Menu des sous-pages 

Cree - en fonction de la page selectionnee comme point de depart - la liste des pages 
situees a un niveau superieur ou inferieur. 

Menu des sous-pages (avec resume) 

Affiche le titre et les details a propos du contenu des sous-pages. Pour ce, il faut avoir 
entre les details concernant chacune des pages listees dans le champ approprie des 
options secondaires de la page. 

Menu des sous-pages (avec section 

Ce menu affiche le titre de la page et les en-tetes des elements de contenu dont I'option 
Index est activee. 

Plan du site 

Dans la configuration par defaut, ce type de menu cree un apereu des titres de pages 
organises en arborescence, dont le niveau de ramification peut etre defini ; la mise en 
page se determine via TypoScript (styles.sitemap.text). 

Index des sections (Contenu w/lndex coche) 

Ce type de menu est utile pour donner un apereu du contenu de longues pages. Les 
en-tetes de tous les elements de contenu dont I'option Index est activee y sont listes. 

Pages recemment mises a jour 

Liste des dix dernieres pages qui ont ete modifiees au cours des sept derniers jours, et 
qui ne sont pas exclues de la liste par I'option Sans recherche. 

Page en relation (base sur les mots-cles) 

Affiche tous les titres des pages qui contiennent les memes mots-cles ; les pages peuvent 
aussi etre exclues de cette liste si I'option Sans recherche est activee. 



Inserer enregistrements 

Le type de contenu Inserer enregistrements permet d'utiliser certains elements de contenu Reference 733467 
plusieurs fois sur un meme site. De cette facon, on ne copie pas I'enregistrement, mais on cree 
simplement une reference vers I'original. Si I'original est mis a jour, les references reprendront 
aussi les dernieres modifications. 
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Le champ Elements et le navigateur d'elements permettent de creer des relations vers tous les 
types de contenu classiques et vers les enregistrements des extensions (ex. : un enregistrement 
d'adresse). La personnalisation de I'affichage des enregistrements dans le frontend via le champ 
Mise en page est definie par le TypoScript du gabarit de la page. 



Figure 3.41: 
Type de contenu 
Inserer 
enregistrements 



Lam™. 



fSlCutitenu Oe la UdV« 
BIMlRt 



Inserer un plugin 

Les extensions du frontend (plugin) organisent des structures de contenu plus complexes sous 
la forme de categories, de listes ou de vues detaillees. El les enrichissent la gamme des fonc- 
tionnalites disponibles, par exemple pour une boutique en ligne ou un moteur de recherche. 

Pour faire en sorte qu'un plugin soit affiche correctement dans une page, I'extension corres- 
pondante doit d'abord avoir ete installee et configuree correctement par I'administrateur. Son 
installation est expliquee plus en detail au chapitre 6. 



Script 

Le type de contenu Script permet d'integrer vos propres fonctions dans le site Web. A cette 
fin, le developpeur doit d'abord definir la fonction dans le gabarit, et ensuite, celle-ci peut etre 
appelee via le champ CODE. 

Exemple : la configuration suivante devrait etre integree dans le gabarit avec sectionscript : 

tt_content . script { 

key. field = select_key 
sectionscript = PHP_SCRIPT 

sectionscript . file = f ileadmin/editor/script/section. inc 

} 

La validite du script a travers I'arborescence des pages est specifiee par les champs Point 
d'entree et Recursion. D'autres parametres peuvent etre passes comme arguments aux scripts 
dans les champs correspondents 6 . 



Separation 

Le type de contenu Separation sert simplement a structurer le contenu d'une page tres 
chargee dans le backend - et par le fait meme dans le frontend a I'aide de la configuration 
appropriee (telle que la balise <hr />). Le contenu peut des lors etre divise en blocs. 

6 Cette mention est faite dans un souei d'exhaustivite. En effet, les redacteurs n'entrent normalement pas en 
contact avec ce type de contenu pour des raisons techniques ainsi que de securite. 
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3.7 Ressources dans TYP03 



HTML 

Ce type de contenu permet I'insertion de lignes de code HTML a I'etat pur. II est conseille de le 
desaetiver pour les redacteurs, en grande partie pour une question de securite. 



3.7 Ressources dans TYP03 

3.7.1 Gestion des ressources dans l'arborescence des fichiers 



Par ressources, nous entendons les medias et les fichiers de toute sorte qui sont neeessaires 
a la conception d'un site Web. II s'agit d'images, de son, de videos et de documents de tous 
types, mais aussi des documents de definition tels que des feuilles de style ou des gabarits 
HTML, lis sont enregistres sur le serveur Web dans le repertoire fileadmin/ et disponibles dans 
TYP03 pour etre traites et integres. 

II est recommande de creer une structure de repertoire la plus claire et la plus logique possible, 
afin que chacun s'y retrouve facilement. En particulier, les droits d'acces des differents utilisa- 
teurs et groupes d'utilisateurs doivent etre pris en compte. La tache d'organiser une structure 
et d'accorder aux differents redacteurs des droits d'acces a des sections specifiques du systeme 
de fichiers revient a I'administrateur. En fonction de la ta i I le de I'application, il est recommande 
de grouper les fichiers selon le type de media et de structurer des dossiers de facon similaire 
a l'arborescence, parce que les redacteurs comprennent facilement et rapidement une telle 
structure. 



Reference 599239 



[3 media 
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■■■■'j, j cornmercants 

\-->mi presentations 




j material_interne 
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serveur 



[media]: images/produits/ 
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W Afficher les miniatures 
|7 Afficher le presse-papiers 
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l]9lHi]| | [menu] _J 
0 Normal 

(Pss d 'elements) 
0 Presse-papiecs N°l 
0 Presse-papiers N°2 




Figure 3.42: 
Administration de 
references via le 
module Fichier — » 
Fichiers ; acces 
restreint au point de 
montage media 



Lorsque les droits sont accordes, il est important de savoir quels utilisateurs ont recu des droits 
pour administrer les branches de l'arborescence de repertoires auxquels ils ont acces. La quan- 
tity de ressources grandit en general tres rapidement. C'est pourquoi il est utile de les conserver 
dans des repertoires de ta i I le raisonnable. Pour finir, un certain nombre de redacteurs doivent 
avoir la permission de creer, renommer, copier et/ou deplacer des repertoires. 

Les ressources sont gerees dans le backend de TYP03 dans le module Fichier — > Fichiers. 
L'arborescence apparaissant dans I'aire de navigation [1] montre la structure prevue pour le 
redacteur. En cliquant sur le nom du dossier, le contenu de chacun des dossiers s'affiche dans 
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la vue detaillee [2]. Un menu contextuel existe aussi dans les deux sections de I'interface (aire 
de navigation et vue detaillee). Au bas de la vue detaillee, vous pouvez choisir d'afficher le 
presse-papiers ou les vignettes des images en cochant les eases appropriees [3]. Le presse- 
papiers est toujours disponible dans TYP03 et vous permet de deplaeer, de copier ou d'effacer 
des fichiers ou des elements de contenu. II permet meme de travailler tout un lot de fichiers a 
la fois. Nous y reviendrons plus en detail a la section 3.10. 

Le menu contextuel de I'arborescence de repertoires comporte les actions Nouveau et Envoyer 
des fichiers. Vous pouvez creer plusieurs dossiers en meme temps a I'aide de Nouveau ou 
creer des fichiers texte dans les formats TXT, HTML, HTM, CSS, INC, PHP, PHP3, TMPL, JS, ou 
SQL - mais certains formats peuvent toutefois etre desactives pour des raisons de securite. 
Envoyer des fichiers permet d'envoyer jusqu'a dix fichiers simultanement, du reseau local au 
systeme de fichiers. Lors de cette action, si vous le specifiez, les fichiers existants peuvent etre 
remplaces, ou alors les fichiers ayant le meme nom sont renommes par defaut avec un numero 
sequentiel. 



Figure 3.43: 
Envoi de fichiers 
locaux vers le 
systeme de fichiers de 
TYP03 



| media: images/produits 



| 4 Fichiers T] 

r Ecraser les fichiers existants 





Parcourir... 




Parcourir... 




is 







3.7.2 lnserer des ressources dans une application 

Reference 525663 II n'est pas necessaire d'etre dans le module Fichiers pour envoyer des fichiers. Les fichiers 
peuvent aussi etre copies vers le serveur Web au moment de la creation d'une page. Le navi- 
gateur d'elements permet de selectionner des fichiers deja existants, mais aussi de telecharger 
des fichiers [3]. 

II existe generalement deux facons de manipuler des ressources fichier : les selectionner a 
partir du systeme de fichiers avec le navigateur d'elements [1], ou directement avec le bouton 
Parcourir [2] (envoi a partir du poste de travail local). 

En fonction de la facon dont ils ont ete copies sur le serveur, les fichiers sont enregistres a 
des endroits differents, ce qui determine leur disponibilite par la suite. Un fichier charge via le 
navigateur d'elements vers le systeme de fichiers est disponible pour plusieurs usages sur un 
meme site. Ce n'est pas le cas pour un envoi direct via Parcourir [2], parce que le fichier est 
alors enregistre dans un repertoire systeme interne (uploads/), inaccessible au redacteur. 



116 



3.8 Edition frontend 
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Figure 3.44: 
Envoi d'un ensemble 
de fichiers en tant 
que ressources vers le 
systeme de fichiers 
[1] ou separement a 
I'aide de la fonction 
Parcourir [2] ; 
illustration des 
etapes dans le 
contexte de 
I'insertion d'une 
image dans un 
element de contenu 
Image 



Si le fichier est integre plusieurs fois via le navigateur d'elements, TYP03 deteete automatique- 
ment les copies d'une meme image a I'aide d'une combinaison unique de chiffres (ex. : livre.gif, 
livre_01.gif etc.). Le Rich Text Editor agit de la meme maniere lorsqu'il integre des ressources 
graphiques. Le fichier original (ex. : *.bmp) aussi bien que le format cible (ex. : *.jpg) sont cha- 
cun enregistres et references en tant qu'objets uniques. II est ainsi impossible de confondre 
deux fichiers, puisque des donnees uniques sont assignees a chaque enregistrement, et que 
ces donnees demeurent, meme si les fichiers d'origine sont effaces du systeme de fichiers. On 
peutdesactiver cette fonction dansTypoScript (cf. chapitre 4.8). 



RTEmagicP_t3-livre.bnp 333 KB BMP File Figure 3.45: 

RTEmagicC_t3-livre.bmp .pg 14 KB JPG File t3-livre bmp a ete 

RTEmagicP_t3-livre_01.bmp 333 KB BMP File . . .' . , . , 

RTEmagicC_t34vre_01.bmp.jpg 14 KB JPG File integre trois fois dans 

RTEmagicP_t3-livre_02.bmp 333 KB BMP File differents elements 

RTEmagicC_t3-livre_02.bmp.jpg 14 KB JPG File de contenu 



3.8 Edition frontend 

En mode d'edition frontend, les pages et leur contenu sont directement modifies a partir du Reference 615520 
site Web lui-meme (« editez tout en surfant »). 

Pour beaucoup d'utilisateurs qui, en raison des taches qui leur sont assignees, ne travaillent 
qu'oecasionnellement sur le systeme, il s'agit a coup sur de la methode la plus simple, rapide, 
intuitive et pratique. Le mode d'edition frontend est aussi bien adapte a un travail specifique 
tel que la correction finale d'un texte. L'administrateur a la possibilite de restreindre I'acces 
a I'edition frontend pour certains utilisateurs et groupes d'utilisateurs. Apres s'etre identifie, 
I'utilisateur se retrouve directement dans le frontend. 
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Si le redacteur est identifie dans le backend, toutefois, il a la possibility d'appeler des pages 
dans le mode d'edition frontend a I'aide du menu eontextuel ou du bouton approprie. En regie 
generale, de petites icones d'edition en forme de crayon [1] apparaissent sur tous les elements 
de contenu et des barres d'edition [2]. Les visiteurs habituels du site ne voient bien sur jamais 
ees elements. 



Figure 3.46: 
Edition frontend d 
I'aide des icones [1 ] 
et de la barre 
d'edition [2] 
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Avec I'icone « crayon », les elements de contenu sont affiches individuellement en mode 
d'edition dans une nouvelle fenetre. La barre d'edition permet d'autres actions telles que 
deplacer, cacher et effacer le contenu, ou alors creer de nouvelles pages ou elements de 
contenu. 

II est indispensable que I'administrateur ait configure correctement les droits de lecture et 
d'inscription afin de pouvoir utiliser I'edition frontend. II doit avoir active le Panneau d'ad- 
ministration (Admin Panel) dans la configuration du gabarit et de I'utilisateur ou du groupe 
d'utilisateurs. A I'aide du Panneau d'administration, I'utilisateur peut, dans la section Editer, 
choisir d'afficher ou non les icones d'edition dans le frontend, ou encore d'afficher un champ 
de formulaire sur la page. 
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3.9 Le Rich Text Editor 




Afficher les icones d'edition: 
AfTidiei le> jjdimcauA dVJiUuill 
Formulaires d'edition sur la page: 
Pas da fenetre uolanta: 



0 
0 
0 
□ 

n. His ate ^ 0 



Figure 3.47: 
Panneau 

d'administration en 
bas de page du 
frontend 



Les elements dans I'edition frontend sont crees et affiches a I'aide des icones de la barre 
d'edition. Le cache n'est pas utilise dans ce mode d'edition. Meme si les pages sont servies 
plus lentement a I'utilisateur, cela n'influence en rien la navigation d'un visiteur normal. 

Le mode d'edition frontend fonctionne aussi longtemps que I'utilisateur est identifie dans le 
backend. Si la session backend prend fin (ou si le redacteur se deconnecte), les icones d'edition 
disparaissent. 



3.9 Le Rich Text Editor 

Pour les elements de contenu Texte et Texte ft image, il est possible d'utiliser le Rich Text Reference 888606 

Editor (RTE). Suivant la configuration, le redacteur peut rediger des blocs de texte en mode 

WYSIWYG (« what you see is what you get ») 7 et, par exemple, inserer des images en les 

faisant glisser jusqu'a I'endroit souhaite, ou etablir des liens. Toutefois, lorsque votre element 

de contenu est sauvegarde, contenu et mise en forme ne font plus qu'un, etant donne que les 

balises HTML sont enregistrees directement dans le texte. C'est pourquoi, I'acces au RTE et a ses 

fonctions doit etre soigneusement parametre. Si une application doit par exemple respecter 

les regies d'accessibilite definies par les normes du W3C, avec des feuilles de style (Stylesheets) 

en cascade, le RTE ne doit bien sur utiliser aucune balise pour les polices. La configuration sera 

abordee au chapitre 4.8.4. 

Le RTE dansTYP03 s'appuie sur ActiveX, ce qui implique qu'il ne peut etre utilise qu'avec Inter- Reference 788773 

net Explorer sur des plate-formes Microsoft. Vous avez aussi la possibility d'utiliser htmlArea, 

un autre logiciel libre. Vous trouverez la documentation relative a ActiveX en vous reportant 

a la reference ci-contre. Si le redacteur a I'autorisation d'utiliser RTE, il peut le parametrer 

(dans le module Utilisateur — > Configuration ou en cochant les cases du formulaire d'edition 

situees en bas de page). Si le RTE est active, une barre d'edition comportant plusieurs options 

apparait dans la section Texte du formulaire. 

En cliquant sur I'icone a droite du champ texte, vous ouvrez le RTE en mode plein ecran. Les 
changements apportes a I'original peuvent etre visualises en cochant la case Code source. Le 
RTE peut aussi etre desactive pour des elements de contenu isoles en cochant Desactiver Rich 
Text Editor dans la section Texte de leur formulaire de creation. 



7 NdT : mot a mot « ce que vousvoyez est ce que vous obtiendrez» 
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Figure 3.48: 
Le Rich Text Editor et 
tous ses menus 
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Apud Helvetios longe nobilissimus fuit et ditissimus Orgetorix. Is M. Messala, 
M. Pisone consulibus regni cupiditate inductus coniurationem nobiliatis fecit et 
civitati persuasit ut de finibus suis cum omnibus copiis exirent: perfacile esse, 
cum virtute omnibus praestarent, totius Galliae imperio potiri. Id hoc facilius 
iis persuasit, quod undique loci natura Helvetii continentur: una ex parte 
flumine Rheno latissimo atque altissimo, qui agrum Helvetium a Gerrnanis 
dividit; altera ex parte monte Iura altissimo, qui est inter Sequanos et 
Heluetiosj tertia lacu Lemanno et flumine Rhodano, qui provinciam nostram 
ab Helvetiis diuidit. His rebus fiebat ut et minus late vagarentur et minus 
facile finitimis bellum inferre possent; qua ex parte homines bellandi cupidi 
magno dolore adficiebantur. Pro multitudine autem hominum et pro gloria 
belli atque fortitudinis angustos se fines habere arbitrabantur, qui in 
longitudinem milia passuurn CCXL, in latitudinem CLXXX patebant, 



m 



Le role de la plupart des options d'edition est evident. De plus, en positionnant la souris sur 
les icones, une courte description apparait. Nous vous en donnons une vue d'ensemble dans le 
tableau suivant. Nous reprendrons plus loin les fonctionnalites plus complexes. 



Tableau 3.2: 
Apergu des fonctions 
du RTE 



Fonction 



Raccourci Description 



Couper 

Copier 

Coller 

Style de paragraphe 
Style de caractere 

Police de caractere 

Taille de caractere 

Couleurde texte 
Gras 



(CtiT)+(x) Coupe un element de texte et le conserve dans 
la memoire tampon (aussi disponible dans le 
menu contextuel). 

(ctrp+(c) Le texte selectionne est copie dans la memoire 
tampon (aussi disponible dans le menu contex- 
tuel). 

(ctrp+© Le texte contenu dans la memoire tampon est 
insere a I'endroit oil est place le curseur (aussi 
disponible dans le menu contextuel). 
Permet de selectionner le format du paragraphe 
mis en surbrillance. 

Des classes predefinies par I'administrateur sont 
disponibles afin de mettre en evidence des ex- 
traits de texte. 

Le texte en surbrillance est affiche dans la po- 
lice standard selectionnee. En fonction des po- 
lices installees sur le PC du visiteur, le texte sera 
affiche dans la police selectionnee ou non. 
La taille du texte en surbrillance est ajustee sur 
une echelle de 1 a 7, eonformement au stan- 
dard HTML. 

En fonction de la configuration, une palette ou 
bien une liste de couleurs predefinies s'affiche. 
(CtiT)+(B) Le texte en surbrillance est affiche en gras (aussi 
disponible dans le menu contextuel). 
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3.9 Le Rich Text Editor 



suite 

Fonction 



Raccourci Description 



Italique 
Souligne 
Justifie a gauche 
Centre 

Justifie a droite 
Liste numerotee 

Liste 

Diminuer I'indentation 
Augmenter I'indentation 
Inserer un lien 



Inserer un tableau 
Couleur d'arriere-fond 



Inserer une image 



Inserer une icone 



Inserer une ligne 

Inserer des elements uti- 
lisateur 



(CtiT)+rn Le texte en surbrillance est affiche en italique 
(aussi disponible dans le menu contextuel). 

CctiT)+(TJ) Le texte en surbrillance apparaTt souligne (aussi 
disponible dans le menu contextuel). 

Le bloc de texte dans lequel se trouve le curseur 
est justifie a gauche. 

Le bloc de texte dans lequel se trouve le curseur 
est centre. 

Le bloc de texte dans lequel se trouve le curseur 
est justifie a droite. 

Les paragraphes mis en surbrillance sont orga- 
nises en liste, dont chaque element est precede 
d'un nombre. 

Les paragraphes mis en surbrillance sont orga- 
nises en liste, dont chaque element est precede 
d'une icone. 

Reduit ou retire I'indentation du paragraphe 
mis en surbrillance. 

Indente le paragraphe mis en surbrillance une 
ou plusieurs fois. 

Les passages de texte mis en surbrillance de- 
viennent des liens vers d'autres pages de I'ap- 
plication. 

Ouvre un assistant a la creation d'un tableau. 
Comme pour la couleur du texte, une palette 
ou une liste de couleurs predefinies s'affiche en 
fonction de la configuration du RTE. 

Meme si TYP03 prevoit un type de contenu 
permettant I'insertion d'images dans un texte, 
cette operation peut etre effectuee directement 
dans le RTE. 

TYP03 contient une liste d'icones pouvant etre 
inserees dans le texte. Vous pouvez ajouter de 
nouvelles icones a cette selection. 

Introduit une ligne entre les paragraphes. 
Si I'administrateur a defini des fonctionnalites 
et des details particuliers, ils seront introduits 
dans le menu approprie. 
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Inserer un lien 

Reference 648217 Si un extrait de texte est mis en surbrillance et que vous appelez ensuite la fonction Inserer un 
lien dans la barre d'edition, le navigateur d'elements s'ouvre avee des options speeiales pour 
I'edition. Comme d'habitude, vous pouvez « parcourir » la page ou I'arborescence de fichiers 
afin de definir un lien vers des pages, des elements de contenu ou des fichiers contenus dans 
le systeme. Vous pouvez specifier dans le menu de selection, ou manuellement dans le champ 
Cible si le lien doit etre ouvert dans sa propre fenetre (_self), dans le haut du cadre (_top) 
ou dans une nouvelle fenetre (_blank). Lorsque vous renvoyez a des URL externes, assurez- 
vous que vous inscrivez I'adresse complete, avec le protocole (http://). En ce qui concerne les 
emails, I'adresse du destinataire doit etre inseree. 



Figure 3.49: 
Insertion de liens 
avec le Rich Text 
Editor 




Arborescence de pages: 



B2C-Accueil E 


[7] Accueil 


0 Accueil IB 




HB2C 


□ AUuilitfk B 






[j Evenements E 




^Bii^venue 


0 Produits E 




ggwelcome 


H Commercants E 




^Nouvelles 


33 Fondionj 







r 



T 



Ouvrir dans une fenetre: I Largeur »l x I Hauteur ^ I 



Inserer une image 

Reference 033547 Les images peuvent aussi etre inserees directement dans le texte a I'aide du RTE. Si la fonction 
Inserer une image est appelee dans la barre d'edition, le navigateur d'elements affichera 
trois modes : Nouvelle « Magic » image, Nouvelle « plain » image et Glisser-deposer. 
Le mode Nouvelle « Magic » image supporte tous les formats et toutes les tailles d'image. 
L'image est automatiquement convertie vers un format graphique adapte au Web. Vous aurez 
plus tard la possibility d'en modifier la tail le afin d'optimiser le format et la qualite d'affichage. 
Le mode Nouvelle « plain » image n'accepte que les formats graphiques Web (JPG, GIF, et 
PNG), avec une resolution maximale de 640x480 pixels. Ce mode est prevu pour travailler 
avec des images deja congues pour le Web. Dans le mode Glisser-deposer, les images peuvent 
etre inserees directement dans le texte a partir du navigateur d'elements. Si une image deja 
inseree a besoin d'etre reeditee, vous devez la selectionner et rappeler la fonction Inserer une 
image. Les attributs tels que la hauteur, la largeur, la bordure, la marge a gauche/a droite, 
la marge en haut/en bas ou le titre, peuvent etre specifies dans le mode Image courante. II 
est toutefois recommande d'utiliser les elements de contenu Image et Texte ft image pour 
I'insertion d'images dans une page. 
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EH5? media 

□ ■ I images 

-^ 

i ■ | cornrnercants 

; __J presentations 
Hjfi produits 
_] material_interne 
_J telechargements 

H Afficher les miniatures 



Figure 3.50: 
Insertion d'images 
dans le Rich Text 
Editor a I'aide du 
navigateur 
d'elements 



Chemin: nleadmin/media/images/produits/ 



J I Biome... ) 



ar da: fickiart 



□ Ecraser les fichiers existants 

\*)Dans le mode "Magic" vous pouvez selectionner n'importe quel format 
d'image. 



Inserer un tableau 

Un assistant simple d'utilisation permet d'inserer des tableaux dans le RTE. Son fonctionne- 
ment est plutot rudimentaire : il permet de specifier le nombre de lignes et de colonnes, ainsi 
que I'espacement inter- et intra- cellules, la couleur et la largeur des bordures, ou meme une 
image d'arriere-fond pour tout le tableau. Toutefois, pour inserer un tableau, il est recom- 
mande d'utiliser I'element de contenu prevu a cet effet plutot que le RTE. 




P.oxs and Columns 



Rows : |2 | 
Columns: \2 | 



| Insert Table 1 I Cancel | 



Figure 3.51: 
Assistant a la 
creation d'un tableau 
dans le Rich Text 
Editor 



3.10 Travailler efficacement avec TYP03 



Jusqu'ici, nous vous avons presente I'edition dans le backend et dans le frontend, ainsi que 
les elements de contenu standards. Dans cette section, nous abordons a I'aide d'un exemple 
pratique la maniere de travailler efficacement avec TYP03. Nous vous presentons les fonctions 
et les methodes de travail qui simplifieront et accelereront votre travail au quotidien. 
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3.10.1 Scenario 

Notre exemple est base sur un scenario de gestion de contenu dans lequel nous devons fournir 
de I'information a trois groupes cibles differents d'une installation TYP03 : 

1. Business to Consumer (B2C) 

Site Web public destine aux consommateurs; cette partie de I'arborescence contien- 
dra de I'information prevue pour un large public. Notre societe fictive desire une page 
reservee a sa gamme de produits, une section d'actualites sur la page d'accueil, une 
page « evenements », la liste de ses revendeurs et des elements de contenu standards 
tels qu'un menu contact, le logo de la societe, et un plan du site, repris dans la section 
Fonctions du site. 

2. Business to Business (B2B) 

Section reservee aux partenaires et fournisseurs et protegee par un mot de passe ; cette 
page contient de I'information plus detaillee sur les produits ainsi que du materiel de 
promotion pour les revendeurs. 

3. Business to Employee (B2E) 

Intranet reserve aux employes; ce forum destine a I'usage interne contient de I'infor- 
mation pour les employes. 

Un tel scenario est ideal pour la reutilisation du meme contenu a differents endroits. Malheu- 
reusement, il en est rarement ainsi dans la pratique. Pour des raisons de securite, les serveurs 
intranet et Internet sont toujours separes, de sorte que la situation decrite plus haut n'est pos- 
sible que si tous les sites Web sont crees sur le serveur intranet et que les sites B2B et B2C sont 
alimentes en contenu par un autre serveur Web situe sur Internet. Le chapitre 2.6 donne plus 
d'informations sur une architecture pouvant servir de solution, en particulier sur la separation 
entre le serveur en ligne et le serveur de production. 

3.10.2 Creer I'arborescence des pages 

Re&ence 189036 Nous commencons d'abord par creer les trois sites Web dans le systeme. 



Figure 3.52: 
Arborescence du site 



BT3-Entreprise 
3) Portail 
Ep~£| B2C-Accueil 
S |^B2B-Accueil 
\h £f|?B2E-Accueil 
&-|=| Contenus 
Gabarits 



Nous creons d'abord un « Portail », et une page « B2C Accueil » au niveau inferieur. Une 
methode plus rapide est appliquee pour creer les sous-pages. Dans le module Web — > Fonc- 
tions, un Assistant presente un formulaire permettant de creer jusqu'a neuf pages simul- 
tanement. L'assistant place ces pages apres la page selectionnee dans I'arborescence, ou en 
tant que sous-pages de celle-ci. Dans notre exemple, vous commencez par creer la page 
« B2C Accueil » manuellement, puis vous I'appelez dans le module Web — > Fonctions. Vous 
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seleetionnez ensuite I'assistant dans le menu deroulant dans le coin superieur droit de la vue 
detaillee, et la fonction Creer plusieurs pages multiples. Saisissez les titres des pages que 
vous souhaitez creer. Vous ne remplissez pas les champs dont vous n'avez pas besoin. Les nou- 
velles pages seront creees en tant que sous-pages, a moins que vous ne specifiiez le contraire 
en cochant la case Placer les nouvelles pages a la suite. L'option Masquer les nouvelles 
pages indique que les pages nouvellement creees ne seront pas visibles dans le frontend, ce 
qui devrait toujours etre le cas lorsqu'on ajoute des pages aux sites Web deja existants. 

La fonction Trier les pages vous permet de trier les pages d'un meme niveau en fonction du 
titre, du sous-titre, de la date de modification ou de la date de creation, ou encore d'en inverser 
I'ordre actuel. 



fcfl 0 ^ BSC Accueil 
Cli /BZC-Atuiailf 



Selection d'ASJlStant: | C»««r plujieun pnjni Miulliplv: 



fRfFRPIH 



tr6erdes rwuvelles paqes: 

Pago li |anrti*il 
Pago 2i 



c uan«mant , c 



Page 7: 
Page ti 
Page Si 
Page 6- 
Page 7: 
Pago 9i 
Pago 9i 

r" Placer les nouvelles pages a la suite 
I - Masquer les nouvelles pages 



Figure 3.53: 
Assistant du module 
Web — > Fonctions 
pour faciliter la 
creation et le tri de 
pages 



Afin de creer I'arborescence B2B, configurez l'option Copie recursive du module Utilisateur 
— ► Configuration afin de copier au moins un niveau lorsque vous enregistrez une page dans 
la memoire tampon. Vous pouvez ensuite inserer la page copiee apres la page « B2C Accueil » 
en cliquant sur I'icone d'« B2C Accueil » et en y ajoutant la page copiee avec l'option Coller 
apres. 



□ g| DIC Accu..l 




Plu» d'ow Uons 
C«cher 
Import Ottiee 
Option* do uifibilite 



3 ::i riiilillfc 
IB U Cantmut 



B2C-Accucil 
uicualitor 
FHlter 
Nuuv««u 
Into 



r- Copier 
Coupet 



n 



Collar dans 

Plus dopisons ...\-J 
earner j£ 
Impurt, OlYii* H 

Opttam J« vMblM 

'cdrteH-.r, tit. d. , 

J Cunioiiu* 



F/gure 3.54: 
Copier-coller d'une 
page 
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3.10.3 Presse-papiers 

Reference 965454 II est souvent necessaire d'editer plusieurs pages ou elements de contenu au cours d'une ses- 
sion de travail ; on utilise alors le Presse-papiers, qui affiche les elements que eontient la 
memoire tampon et propose une serie d'options d'edition. 

On I'aetive en cochant la case Afficher le presse-papiers dans le bas de la vue detaillee. Vous 
devez aussi cocher la case Vue etendue si el le n'est pas deja activee. Alors que la memoire 
tampon Normal [1] ne peut contenir qu'un element a la fois, les Presse-papiers 1-3 [2] 
peuvent contenir plusieurs pages ou elements de contenu. 

Si le presse-papiers est active, une icone supplemental apparait dans la vue detaillee du 
mode Liste (repris ci-apres sous le nom « affichage liste »). Des qu'un des Presse-papiers 
1 -3 est active, des cases a cocher apparaissent derriere chaque element liste, rendant possible 
la selection de plusieurs elements [3]. L'icone « information » dans la barre de menu (cf. vue 
etendue) affiche toute I'information essentielle a propos de I'enregistrement en question. 



Figure 3.55: 
Utilisation du 
presse-papiers : le 
presse-papier n° 1 est 
actifet eontient deux 
elements 



I /B2C-Ao:ueil/Produits, 



Titre de la page: 


»^ 1 


3^35? 


Pi Produit 1 




□H 


| 1 Produit 2 




□H 


P| Produit 3 


t< ^ & o "BDC 4 zlil an 


□a 


[J Produit 4 




□o 



En-tete : 

contenu & drolte 
[g§ fight content 

CLXXX potcbant 
Nn< prnHuite 
^3 Our products 
l§§ Haute qualite 
| Highest quality 
louueautes 




□ Presse-papiers N°l(2) 
t^3j contenu a droite 





0*1 



Dans le presse-papiers, l'icone « appareil photo » permet d'afficher les vignettes des images 
copiees dans le presse-papiers, et l'icone « copier » permet de choisir entre le mode « co- 
pier » (icone orange) ou « deplacer » (icone grise) pour tous les elements contenus dans 
le presse-papiers [4]. L'endroit ou les elements doivent etre inseres est determinee a I'aide 
de l'icone correspondante dans la vue detaillee (Coller dans; Coller apres) [7]. Mais il est 
aussi possible d'ouvrir les enregistrements dans le presse-papiers pour les editer ou les sup- 
primer definitivement a I'aide du menu deroulant [5]. Si plusieurs elements se trouvent dans 
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la memoire tampon, ils seront affiches en tant que formulaires d'edition, I'un a la suite de 
I'autre. Si vous souhaitez simplement effacer les enregistrements de la memoire tampon, cli- 
quez sur I'icone marquee d'une croix a droite de chaque element, ou sur le bouton dans le 
menu d'edition du presse-papiers [6]. 



Exemple 

Dans notre exemple, la premiere copie de I'arborescence de B2C est renommee en « B2B Ac- 
cueil » et on y ajoute deux nouvelles pages : « Teleehargements » (apres « Revendeurs ») et 
un dossier systeme, « FEUtilisateur » (apres « Fonctions »). Une fois le presse-papiers active, 
seleetionnez toutes les sous-pages de « B2B Aceueil » dans l'« affichage liste » et ehoisissez 
I'option Editer la selection. 




^BOUSO*} .zl4liil.ll 
Ci'&BOISQ'O .zl.zl4ffi.il.il 
Q. % E □'H.Dtbil J 40 44 
<A\S[fc013U*!>444ffi.ll.Ll 
B 0 1sn¥vy44fir 44 
<^&01ISB'O444£iI44 




Dans les champs Titre dans la liste de formulaires, vous pouvez maintenant modifier les pages 
afin d'obtenir I'arborescence suivante. 



Figure 3.56: 
Options de selection 
et d'edition dans 
/'« affichage liste » 
quand le 

presse-papiers est 
active 



Titre de la page: 

H| Aceueil 

0 Actualites 

D Euenements 

3 Produits 

D Reuendeurs 

Pi Teleehargements 

9 Fonrtions 

^ FEUtilisateur 

f| Corbeille 



figure 3.57; 
Arborescence de la 
section « B2B 
Aceueil » apres 
edition et ajout de 
deux nouvelles pages 



A partir de la page « Commercants », une page « Revendeurs » a maintenant ete creee. 

L'arborescence B2E doit encore etre creee ; nous procederons en utilisant les options de traite- 
ment par lots dans I'affichage liste. 



3.10.4 Editer des champs selectionnes 

L'affichage liste offre la meilleure vue d'ensemble, ainsi que le meilleur acces aux enregis- Reference 729118 
trements lies a une page. Mais el le offre d'autres fonctionnalites qui ne sont pas visibles au 
premier coup d'ceil. Nous vous recommandons de commencer par activer la Vue etendue et le 
Presse-papiers. Pour tous les types de donnees (tels que les pages, les elements de contenu, 
etc.), on peut selectionner les tables correspondantes, afin de les visualiser ou de les parametrer 
individuellement, a I'aide de I'icone « + » situee dans I'en-tete [1]. 
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En consequence, l'« affichage liste » est elargi grace a un menu de selection oil les champs 
individuels peuvent etre selectionnes, afin d'etre ensuite affiches dans la table [2]. Dans cette 
figure, on a selectionne les champs Type et Lancement [3]. En cliquantsur le titre des champs, 
vous pouvez trier les enregistrements de cette selection par ordre croissant ou decroissant. 
Vous pouvez ainsi trier rapidement les nouveaux elements par ordre alphabetique, ou par date 
de creation, par exemple. Tous les champs affiches dans une colonne peuvent etre edites grace 
a I'icone « crayon » [4]. En combinant cette fonction avec un presse-papiers et en marquant 
les enregistrements individuellement, vous pouvez restreindre la selection de donnees pour 
leur edition. Afin d'ouvrir le formulaire d'edition pour tous les champs des colonnes et des 
enregistrements listes (ou selectionnes), cliquez sur I'icone « crayon » situee au-dessus des 
options d'edition individuelle [6]. 

Cette methode facilite grandement I'edition de la meta-information (resumes, mots-cles et 
descriptions) dans I'arborescence pour toutes les pages deja creees a un meme niveau. L'affi- 
chage des champs est aussi conserve et restitue des que I'utilisateur clique sur I'icone « Menu » 
(le symbole « - ») afin d'afficher toutes les tables. Toutefois, elles ne peuvent etre editees in- 
dividuellement dans ce mode. 

Une seconde option consiste a exporter des elements comme un fichier CSV, qui apparait si 
vous avez selectionne une table en affichage exclusif dans le module Liste. El le permet de 
telecharger le contenu des champs selectionnes plus tot en tant que fichier CSV (Comma 
Separated Values) 8 



NdT : valeursseparees par desvirgules. 
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Exemple 

Afin de completer notre arborescence, nous eopions maintenant I'arborescence « B2B Ac- 
cueil » et inserons la copie apres I'original. Cette nouvelle page est renommee « B2E Accueil ». 
Les fonctions additionnelles sont maintenant visibles dans I' « affichage liste » grace a I'icone 
« + » dans I'en-tete de la table. Selectionnez Type, Titre de la page et Raccourci vers page. 
Si vous cliquez sur I'icone « crayon » adjacente au titre de colonne correspondant, tous les 
elements de cette colonne seront affiches dans un formulaire d'edition. 

Maintenant renommez les pages, modifiez les types de pages et corrigez le raccourci de la page 
« Accueil » de facon a produire I'arborescence suivante. 

^Titre de la page:' ^Type; ?j Raccourci vers page; 

Eg Accueil Q.^BrD'BaHQ JiifflJJ BUA Raccourci 75 

Q Nouveautes Q.^ BfDIQ^l^fjdilffl^l^J Auance 

□ Elements Q. *J & □ 4zl£l ffl 1121 Eg* Auance 

□ Departements Q,^ E>D1:0¥l^^i^ffldi^l Auance 

□ Fournitures Bureau C^^ Ej.Q'BB^^ZijSj ffl Jjl] 11=1* Avance 
Q Adresses Ef 0 %U%4 J^ffl -U-U SU* Auance 

□ Manuels Q.^ Br 0 "SO*^^® JJ-U 8=]X. Standard 

□ Panneau Affichage Q,^ ErD^G^iJ^dj^ffl -U-ti 3=1* Avance 
<a Fonctions BrD^D'fe^^liiffl MJd l$i]<X> Dossier Systeme 
$ Corbeille BrD^a^ zl£l® 1121 SU* Corbeille 
9 FEUtilisateurs Q. ^ Br O 'SD'Cl^ iJffl-U-tJ El* Dossier Systeme 



3.10.5 Raccourcis 

Apres avoir travaille un certain temps avec TYP03, vous realiserez que vous devez editer cer- 
taines pages - par exemple les pages d'actualites - particulierement souvent. Plusieurs rac- 
courcis sont disponibles afin de vous permettre d'acceder directement a ces pages apres vous 
etre identifie. 

Utilisateur — >• Centre de taches : Pages recentes 

Si la page souhaitee a ete editee recemment, el le peut etre ouverte directement dans le module 
Utilisateur — > Centre de taches sous la rubrique Pages recentes, apres que vous vous etes 
identifie. 



Utilisateur — > Centre de Taches : 

L'administrateur peut ajouter a la liste les pages ayant besoin d'etre souvent editees, et y 
donner un droit d'acces dans le module Utilisateur — > Centre de taches. 



Raccourcis en bas de page 

Une autre possibilite est de creer vos propres raccourcis vers les pages correspondantes. L'ad- Reference 585979 
ministrateur a deja cette possibilite dans la configuration de base du profil utilisateur. Pour les 



Figure 3.59: 

Liste en mode etendu 

apres edition 
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redacteurs, I'administrateur doit accorder les droits via TSConfig, afin que la barre de raccoureis 
soit affichee ail bas de la page. Voir la reference ci-contre. 



options . shortcutFrame=l 



Le redacteur a maintenant la permission de creer des liens vers la page voulue via I'icone de 
raccourei [1] dans la vue detaillee. lis apparaissent en bas de page du backend [2] et peuvent 
etre organises en groupes [3]. Pour y parvenir, activez I'option Editer, cliquez sur le lien, 
assignez-le a un groupe et nommez-le. Le titre permet d'acceder au lien directement via le 
menu de selection [5]. 

Reference 348238 De plus, le redacteur a acces a un champ [6] qui permet d'appeler les pages de I'arborescence 
directement en entrant leur ID, par exemple, si des erreurs d'affichage ont ete constatees dans 
le frontend. 



Figure 3.60: 
Barre de raccoureis 
dans le bas de page 
du backend 



r~ Editer 



□ 




^1 I rselertionner un raccourei! » I Editer la page (ID): \~ 



3.10.6 Aide au niveau du contenu 

Recherche et remplacement de texte avec l'extension Text tools 

Meme si les pages et la quantite de donnees grandissent rapidement au sein d'une application, 
TYP03 peut vous aider a conserver une vue d'ensemble : les enregistrements et elements de 
contenu specifiques peuvent etre retrouves facilement a I'aide du champ de recherche situe au 
bas de la vue detaillee. La recherche peut s'etendre jusqu'a trois niveaux dans I'arborescence. 



Figure 3.61: 
Options de recherche 
dans la vue detaillee 
Reference 325093 



Une facon encore plus efficace de trouver des elements de texte et de les editer ou de les rem- 
placer immediatement est d'utiliser l'extension Text tools (cc_textfunc) du module Web — > 
Fonctions. L'extension doit d'abord etre installee comme decrit a la section 5.7 pour apparaitre 
comme fonction dans le module Web — > Fonctions. Vous pouvez maintenant parcourir des 
tables, des pages, des elements de contenu ou des gabarits jusqu'a quatre niveaux. Via la 
fonction Search and replace, tous les enregistrements trouves sont listes avec leur contenu 
existant et modifie. De plus, vous pouvez aussi specifier quels sont les enregistrements oil les 
modifications seront apportees. 
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lntegrer des documents Office 

Lorsqu'il genere du contenu, le redacteur est souvent confronte a des fichiers bases sur des 
documents de la suite Office. Si des sections du document doivent etre utilisees en tant 
qu'element de contenu, il est necessaire de decider si les details de mise en forme doivent 
etre repris ou non dans TYP03. En theorie, les details de mise en forme peuvent etre repris 
en I'etat par le Rich Text Editor, en fonction du processus de transformation configure par le 
developpeur. Si vous souhaitez ne pas tenir compte de la mise en forme des documents Office 
et specifier vos propres balises, il est conseille d'enregistrer les textes dans un editeur ASCII, ou 
de desactiver le Rich Text Editor avant d'inserer le texte. On peut ensuite reactiver le RTE pour 
editer le texte. 

Si vous voulez inclure non seulement des extraits de texte, mais aussi des documents Office Reference 138944 
dans leur ensemble, nous recommandons alors d'utiliser I'extension General Office Displayer 
(bientot renommee Document Suite). Cette extension propose une integration transparente 
de documents Word 2003, Excel 2003 et OpenOffice Writer. Alors que les deux premiers for- 
mats doivent etre enregistres explicitement en tant que documents XML, le format SXW est 
supporte pour les documents OpenOffice. Deux methodes d'integration sont maintenant dis- 
ponibles pour le redacteur. 
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3 TYP03 pour les redacteurs 



Dans le premier cas, le document est importe vers le Rich Text Editor : selectionnez la page de 
I'arborescence ou le contenu doit etre insere, activez le menu contextuel et cliquez sur le menu 
Import Office en choisissant le format approprie. Le contenu est alors enregistre en tant que 
type de contenu Texte, et peut ensuite etre edite par le RTE. 



Figure 3.63: 
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La seconde methode integre le document souhaite a I'aide d'un plugin. Au cours de ce pro- 
cessus, le document est extrait de son propre format et transforme en un element de contenu 
sous une mise en forme predefinie. Le texte ne peut toutefois plus etre edite. Le document 
est integre avec un element de contenu de type Inserer un plugin [1] a I'aide de I'extension 
General Office Displayer [2]. Le fichier Office peut maintenant etre ajoute via le systeme de 
fichiers ou a partir du reseau local [3]. 

Le General Office Displayer, publie par Robert Lemke, continue a evoluer sous le nom Docu- 
ment Suite. La gamme de fonctionnalites sera eonsiderablement elargie, et un certain nombre 
d'options de manipulation seront ajoutees. 



Figure 3.64: m] 



Import d'un 
document Office via 
un plugin 




3.10.7 Restaurer/editer l'historique 

Reference 763322 Un historique (simple) du contenu a ete introduit dans la version 3.3 de TYP03. Par defaut, 
le contenu de toutes les tables est enregistre pendant sept jours (604 800 secondes), avec un 
maximum de dix versions pour chaque enregistrement. 
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3.10 Travailler effrcacement avec TYP03 



L'administrateur peut parametrer ce processus plus precisement pour les tables prises separe- 
ment via TCEMAIN_tables. 

Le redaeteur peut retourner a la derniere version en un seul elic. Si vous plaeez la souris sur 
I'ieone « annuler » ou « retablir », la date de la derniere modification apparait. 



Reference 729572 
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Le redaeteur peut visualiser I'historique des changements dans les modules Web — > Page 
Edition rapide et Web — > Liste en cliquant sur I'ieone prevue a cet effet. 
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Figure 3.66: 
Icone pour 
I'historique des 
changements dans le 
module Liste 



L'historique donne un apercu des modifications apportees a I'enregistrement en question. Tous 
les changements sont indiques en vert ; les valeurs existant depuis longtemps ou celles ayant 
ete effacees sont indiquees en rouge. 
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3 TYP03 pour les redacteurs 



Tous les changements jusqu'a la version actuelle sont restaures avec I'icone « crayon » alors 
qu'avec I'icone « information », une version de tous les changements jusqu'a la version ac- 
tuelle est affichee. 



3.10.8 IVIultilinguisme 

II est possible de travailler avec plusieurs langues dans une seule et meme arborescence avec 
TYP03. Si les gabarits de page sont prepares en consequence, plusieurs versions d'une page 
pourront etre editees en fonction de la langue selectionnee. 

Une option de traduction apparait alors a I'intention du redacteur dans le module Web — > 
Page sous I'option Langues. 



Figure 3.68: 
Creation d'une 
traduction 
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Apres avoir selectionne la langue pour la page en question, vous devez remplir les champs de 
la section Titre de la page. Vous pouvez alors Creer du contenu de page ou Copier les 
elements de contenu par defaut. 



Figure 3.69: 
Affichage du contenu 
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3.10 Travailler effrcacement avec TYP03 



Cette derniere possibility offre I'avantage de pouvoir envoyer au redaeteur les elements a 
traduire, selon les permissions qu'il a dans les differentes langues. La mention « Translate to 
langue » apparait alors au debut du texte a traduire. 




Qallia est omnis divisa in partes tres. 

q'-.iurn irn r::.|uri<: £-lq-^ -li^m 

Afluitani. tertiam qui ipsorum lingua 
Ceitae,. n:;t,a aalli appe.lantui. Hi 
omnes linqua, institutes, leqibus inter se 



Figure 3.70: 
Element de content! a 
traduire 



Si vous ouvrez le formulaire d'edition de la traduction de la page, vous eonstaterez que les 
valeurs des champs sont reprises [1] et eomparees a celles de la version originale (via les zones 
vertes) [2]. 
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3 TYP03 pour les redacteurs 



Vous pouvez aussi demarrer ce workflow de traduction directement dans le module Web — > 
Liste ou activer la Vue de localisation. Pour les traductions manquantes, un message apparaTt. 



Figure 3.72: 
Traductions 
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Le module Web — » Info — > Localisation donne la meilleure vue d'ensemble sur des sections 
entieres de I'arborescence ainsi que sur I'etat des traductions. On ajoute des titres aux traduc- 
tions des pages en cochant les cases des pages respectives, puis en cliquant sur I'icone Creer 
un nouvel en-tete d'enregistrement [1]. II est possible d'editer les en-tetes de pages ainsi 
que le contenu. Les autres options relatives a la traduction telles que Cacher la traduction 
par defaut (vert) [2] ou Cacher la page si elle n'est pas traduite (rouge) [3] sont mises en 
evidence par une couleur differente. 
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TYP03 pour les administrateurs 



4.1 Taches et objectifs de 1'administTation 

Par administration, on entend toutes les taches n'impliquant ni le travail d'installation et de 
programmation pour la mise en oeuvre d'une part, ni la production de contenu d'autre part. 
L'administration comprend la maintenance technique du systeme, sa configuration, sa sur- 
veillance, ainsi que le controle et I'adaptation des resultats de la production de contenu. Jus- 
qu'a present, les occasions de s'exercer au role de gestionnaire de contenu ont ete rares, et 
la plupart des personnes oeuvrant dans cette branche n'ont pas cherche a y entrer, tout au 
contraire : le secteur les a trouves. C'est toutefois une tache critique pour I'entreprise, car il ne 
s'agit pas seulement de maintenir une bonne image de la societe, mais aussi d'integrer I'outil 
de gestion de contenu Web dans le champ plus large de la gestion. 1 

'« People need to realize that the Web is no longer the thing about the thing; it is the thing itself. The 
site represents your organization. Content management is, indeed, managing the business. » Suzanna Phelps- 
Fredette dans une transcription d'une conference (« Content Management - How Can We Stop the Train 
Wreck? ») dans le cadre de la conference IQPC Web Site Content Management tenue a San Francisco en 2000, 
http://www.metatorial.com/papers/aha.asp 



4 TYP03 pour les administrateurs 



Vue de cette facon, « la gestion de contenu [...] s'integre completement dans la gestion d'in- 
formation interne dans une soeiete et dans la gestion des connaissances. El le combine des 
aspects organisationnels, des precedes d'entreprise et des technologies. » 2 
Mais la technique n'est qu'un moyen : « alors qu'elle simplifie la creation, I'enregistrement et 
la diffusion de contenu, fondamentalement, ce sont les precedes d'entreprise et les workflows 
qui permettent I'utilisation efficace et profitable de la technique. » 3 

L'administrateur joue le role d'un architecte present en permanence, qui rend I'information 
visible a I'exterieur en organisant les ressources en consequence. Que ce soit l'administrateur 
lui-meme ou un consultant qui ait cree les processus de travail, l'administrateur doit etre 
completement familiarise avec la terminologie et les methodes du CMS utilise, afin de pouvoir 
influencer la conception, 1'evaluation et I'optimisation de I'information publiee. 

Malheureusement, lors de I'introduction d'un CMS, on oublie souvent que I'effort principal 
reside dans la production continue de contenu. « Alors que la technique est necessaire a rim- 
plantation d'un CMS, cet investissement est la partie la plus simple d'une strategic CMS. » 4 

Ce fait a ete largement documente et se verifie dans pratiquement tous les projets CMS. De 
plus, I'introduction d'un CMS entrame toujours des changements tels que de nouvelles taches 
et de nouveaux precedes. Meme lorsque le contenu est preexistant, des changements a large 
echelle sont probables : lors de introduction du CMS, les processus existants doivent aussi 
etre ameliores, avec pour consequences leur replanification et leur optimisation. 

L'administrateur se trouve done au cceur des operations d'introduction et d'execution ; il ou 
elle est responsable des processus concernes. Le travail qui doit etre fait directement sur le 
CMS necessite I'analyse des besoins pour le processus de redaction, et leur confrontation avec 
les outils proposes dans le systeme. 

Les gestionnaires de contenu ayant le role d'administrateurs controlant le systeme sont sou- 
vent des employes moins verses dans les technologies, et qui sont plutot responsables de 
I'image externe de la soeiete, du marketing et des relations publiques, ou de la communication 
avec les clients (B2C), les partenaires d'affaires (B2B), et les employes (B2E). Des assistants (wi- 
zards) les accompagnent dans la plupart de leurs taches dans TYP03. Ces utilitaires offrent une 
grande variete d'options de configuration pour I'interface utilisateur, et permettent egalement 
d'accorder certains droits aux groupes et aux utilisateurs. Meme quand les parametres du 
systeme sont impliques, notamment avec le systeme TSConfig, un assistant guide ceux qui s'y 
connaissent moins bien en informatique. 

L'administrateur a aussi la responsabilite de garantir la creation de valeurs a partir des pro- 
cessus CMS. Dans ce cas, le systeme agit a la fois en tant qu'environnement de production et 
en tant qu'outil d'analyse. Dans ce domaine, TYP03 offre plusieurs modules internes permet- 
tant I'analyse des statistiques. En plus des parametres propres a la publication de contenu, 
il existe une puissante interface de base de donnees a I'aide de laquelle vous pouvez definir 
par vous-meme des requetes specifiques, qui peuvent ensuite etre enregistrees pour un usage 
ulterieur. 

2 Floria n Stahl : « Damme gegen die Informationsflut : Content Management ist mehr als ein Stuck Software », 
Neue Zurcher Zeitung, 23.05.03, http://www.nzz.ch/2003/05/23/em/page-artiele8TPZ8.html. 

3 Meme source 

4 Geoff Choo : « CMS strategy : Don't put the cart before the horse »,TechRepublic Ins, 1 1 decembre 2001,ZDNet 
Australie : http://www.zdnet.com.au/insight/toolkit/weboperations/cms/0,39023923, 20262306.00.htm 
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4.2 Planifier et installer l'environnement de gestion de contenu 



Dans ce cadre, le chapitre qui suit vous presente les problemes principaux rencontres lorsqu'on 
met en place un environnement de gestion de contenu, et illustre par le biais d'exemples la 
definition des droits, diverses options de configuration pour le backend, ainsi que des outils de 
controle et de validation du contenu. 

4.2 Planifier et installer l'environnement de gestion de 
contenu 

C'est une tache ardue que d'analyser I'introduction d'une application de gestion de contenu a 
travers des processus nouveaux ou existants. Pareil travail implique la definition des sources, 
des frequences et des formats de contenu. De plus, il faut aborder la planification et la mise 
en place des etapes de travail afin de repondre aux besoins redactionnels du projet. 

Le Business Process Redesign (BPR) est un outil repandu pour I'analyse, le developpement et 
la construction de tels processus de travail et leur mise en ceuvre dans un environnement de 
gestion de contenu. Le BPR combine a un Rapid Application Development (RAD) produit des 
workflows efficaces et des processus d'entreprise supportes par une infrastructure informa- 
tique. Nous expliquerons brievement ces deux approches. Nous vous donnerons par la meme 
occasion une base a partir de laquelle vous apprendrez a mieux connaTtre ces procedures. 

Dans ce cadre, il suffit de comprendre que, dans le contexte du BPR, chaque processus d'en- 
treprise peut etre disseque de facon analytique en une chaine d'elements. Cette analyse met 
en evidence le deroulement d'une tache specifique, avec toutes les conditions, les transfor- 
mations, les resultats et les decisions qui s'y rattachent. Cela permet d'identifier les potentiels 
d'optimisation, qui souvent peuvent etre supportes de facon pratique par I'utilisation ou la 
modification de la technologie de CMS. 5 

Le choix d'un systeme de gestion de contenu resulte souvent d'une telle approche analytique, 
qui peut ici faire office d'exemple d'optimisation fondamentale du processus de gestion de 
contenu : sans CMS, la creation et la maintenance de sites Web demeurent reservees aux 
experts ayant des connaissances techniques. Le chemin allant de la creation d'information au 
sein de la societe jusqu'a sa communication avec la clientele, ses employes ou des partenaires 
d'entreprise est devenu beaucoup plus efficace et rapide grace au CMS. 

En effet, les employes ayant la connaissance du contenu necessaire sont maintenanten mesure 
de la publier sans expertise technique : le processus de publication d'information s'en trouve 
simplifie et accelere. 

Comme second exemple, un CMS pourrait dupliquer automatiquement toute donnee produite Reference 253617 

par une source utilisable universellement, et afficher les annotations faites par les redacteurs, 

puis les publier sur des sites Web, par le biais de pages statiques, ou via des services Web. La 

maintenance de donnees a I'etat pur serait optimisee par la centralisation et la disponibilite de 

donnees enrichies en une sorte de noyau d'information multi-usage. Un exemple de ce genre 

peut etre trouve a la reference ci-contre. 

5 Vous pouvez consulter une representation theorique exhaustive aecompagnee d'exemples pratiques dans 
« Workflow Management : Models, Methods and Systems » de Wil van der Aalst et Kess van Hee, The MIT Press, 
Cambridge Massachusetts, 2002. 
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4 TYP03 pour les administrateurs 



Les procedures d'entreprise devraient etre realistes, faciles a utiliser et pragmatiques. Aussi 
souvent que possible, la creation et le traitement de I'information doivent etre groupes, les 
activites paralleles fusionnees, les mecanismes de controle mis en oeuvre, et I'information re- 
cueillie a la source. 6 

Ces mots d'ordre peuvent, a bien des egards, etre adoptes dans une situation de gestion de 
contenu, que ce soit par la centralisation des donnees a I'echelle de I'entreprise dans une source 
unique, ou par I'assignation intelligente des droits d'utilisateur, en configurant I'interface de 
redaction en fonction des taches a effectuer, par des procedures transparentes et simples, ou 
encore par des controles de qualite permanents. 

Avec TYP03, les precedes planifies de cette facon peuvent etre supportes et affiches eoncrete- 
ment par le systeme de droits d'acces, par la configuration optimisee de I'interface redacteur, 
et par des workflows et des commandes predefinis. De plus, on peut developper et ajouter des 
extensions specialises afin d'ameliorer ce processus. 

Cette analyse methodique et cette conception du processus conduisent a la description detail- 
lee de la solution envisagee : 

■ Le site est structure par sujets 

■ Le contenu, les sources et les formats (actualites, etudes de cas, produits, feuilles de donnees, 
etc.) 

■ Les utilisateurs sont regroupes par roles 

■ Les processus de travail des utilisateurs sont en relation avec les elements de contenu/for- 
mats ainsi qu'avec le flux des informations dans ce qu'on appelle le cycle de vie des elements 
de contenu (cf. section 1.2.2) 



4.3 Principes d 'organisation des droits d'acces dans TYP03 

Alors que I'organisation de contenu peut etre directement injectee dans la structure du site, 
I'analyse des droits a accorder a chaque utilisateur n'est pas menee de facon aussi intuitive ; 
il faut connaitre le mode de fonctionnement d'attribution des droits dans le systeme. On dis- 
tingue principalement les trois points suivants : 

Utilisateurs et groupes 

Des parametres globaux peuvent leur etre assignesafin de controler les options d'edition. 

Pages 

Pour chaque page, on definit les permissions pour le « proprietaire », le « groupe » et 
« tous» (tous lesautres). 

Controle de I'interface d'edition 

L'interface utilisateur peut etre parametree en fonction des pages ou en fonction des 
utilisateurs/groupes d'utilisateurs. 

6 M. Hammer : "Reengineering Work : Don't Automate, Obliterate", Harvard Business Review, July-August 1990, 
pp.104-1 12 
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4.3 Principes d'organisation des droits d'acces dans TYP03 



Dans la pratique, la structure du contenu existant determine la structure future des pages dans 
une arborescence. Les droits des employes concernes sont lies a cette structure de pages en 
fonction des processus de travail. 

En se basant sur les types de taches, on peut mener une analyse des fonctionnalites neeessaires 
a chaque profil d'utilisateur et envisager les modifications a apporter a I'interface pour simpli- 
fier son utilisation, ainsi que pour diminuer les couts de formation. 

Le resultat peut etre presente formellement dans un diagramme a deux dimensions dont les 
axes sont representes respectivement par les utilisateurs et les droits. Tres souvent, il suffit de 
convertir directement ce diagramme dans les parametres correspondants de TYP03. Le module 
Outils — > Administration des utilisateurs vous donne une vue d'ensemble sur les droits des 
utilisateurs. Cette maniere de proceder est logique et rapide. El le convient partieulierement 
bien au contexte de I'approche RAD decrite plus bas. 

Cette approche est basee sur le principe selon lequel le succes du projet depend du degre 
d'implication des utilisateurs dans le processus de definition, et de leur niveau de connaissance. 
Lors du developpement de logiciels, la methode RAD [Rapid Application Development) a ete 
developpee a cette fin, ce qui implique la validation de I'approche conceptuelle d'un projet 
informatique en developpant des prototypes de I'application des les tout premiers stades. Par 
la suite, les utilisateurs sont aussi sollicites pour tester et ameliorer I'application. 7 

Cette approche garantit que la planification et la mise en ceuvre demeurent etroitement liees, 
et qu'il n'y aura aucun choc desagreable lors de la mise en application de la theorie dans des 
situations quotidiennes. 

TYP03 est ideal pour la creation rapide de prototypes, afin par exemple de tester en pratique 
la distribution des taches et des droits chez les utilisateurs. Un autre point positif est que les 
utilisateurs se familiarisent deja avec les options et les principes fonctionnels, se preparant de 
la sorte au travail qui les attend. 

Grace a la possibility qu'offre TYP03 d'ajouter du contenu et de creer des structures de pages, 
meme sans que I'interface soit completement finie, vous pouvez commencer a vous entramer 
immediatement apres Installation et la configuration. De cette facon, vous comprendrez plus 
rapidement les concepts d'utilisateur et de structure du contenu, et la connaissance que vous 
en aurez pourra etre utilisee de fagon appropriee afin de concevoir I'interface, et de produire 
des applications. 

4.3.1 Exemple pratique 

Les exemples pratiques repris dans ce chapitre sont bases sur le scenario decrit ci-dessous. Si 
vous desirez suivre les etapes individ uelles decrites dans les exemples, il est important que vous 
connaissiez leur objectif principal, et essentiel que vous parametriez les pages et les conditions 
comme il est indique dans I'exemple repris ici. Notre exemple se focalise sur une situation dans 
laquelle la plate-forme de gestion de contenu doit fournir trois sites Web. Vu de I'exterieur, les 
trois sites ont un nom de domaine different. Le graphisme repose sur une base commune avec 
de petites touches qui les particularisent. 

'James Martin : « Rapid Application Development », Maemillan Publishing Co., Inc., Indianapolis, USA 1991 ; Wil- 
helm Hasselbring : « Programming languages and systems for prototyping concurrent applications », ACM Comput. 
Surv. 32(1), 2000, pp. 43-79. 
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Portail 

Le portail presente des elements de contenu qui ne sont produits, maintenus et ar- 
chives que par les redacteurs eompetents. De plus, le portail reprend automatiquement 
I'information des autres sites presents dans le systeme. 
Sites Web 

Le systeme comporte aussi une serie de sites Web edites par d'autres redacteurs. Les sites 
de notre exemple sont destines a differents groupes cibles et sont nommes« B2C» (Bu- 
siness to Customer), « B2B » (Business to Business), et « B2E » (Business to Employee). 
Chaque redacteur n'a acces qu'a son interface de travail propre, ainsi qu'a une liste de 
contenus (voir plus bas) afin de rediger des actualites au sein d'un workflow predefini. 

Produits dans les sites Web 

En tant qu'unites organisationnelles en dessous du niveau du site Web, nous supposons 
qu'il existe des zones reservees a la presentation d'un produit particulier. Chaque zone 
a ce niveau est supervisee par des utilisateurs differents (gestionnaires de produits) . 

Listes de eontenus/liste de medias 

Les elements de contenu pouvant etre utilises par des redacteurs de differents sites 
Web sont enregistres dans une aire privee ; les redacteurs peuvent aussi y enregistrer 
des donnees destinees a un usage general et/ou a etre retravaillees. Les elements de 
contenu peuvent etre inseres directement a partir de ce dossier a I'aide de I'element de 
contenu Inserer enregistrements, ou etre copies, selon qu'ils doivent etre reedites ou 
non. 

Ceci signifie qu'il est necessaire d'avoir au moins un groupe pour I'edition du portail, et un 
groupe pour I'edition de chacun des sites Web. L'assignation de droits au moyen de workflows 
et d'actions permet de controler le flux des modifications apportees par les redacteurs de 
chaque site sur les actualites et permet une repartition claire des responsabilites de production 
et de publication. 

4.3.2 Etapes de mise en ceuvre 

Les etapes suivantes, dans I'ordre specifie, sont necessaires a la mise en place du systeme : 

1 . Creer une arborescence de base a partir de laquelle les droits peuvent etre accordes 

2. Creer des groupes qui rassembleront certains utilisateurs 

3. Creer des comptes utilisateurs qui seront repris dans un groupe particulier 

4. Creer des workflows et des commandes dans I'ordre que vous desirez 

La structure de I'arborescence de notre exemple correspond a celle presentee au chapitre 3.10. 

Dans la prochaine etape, nous creerons les groupes d'utilisateurs ainsi que la base pour les 
systemes de droits d'acces. 

4.4 Administration des utilisateurs backend 

Les redacteurs et les auteurs travaillent le contenu dans les coulisses du site public (frontend). 
Leur espace de travail est ce qu'on appelle le backend, dont plusieurs parametres peuvent etre 



144 



4.4 Administration des utilisateurs backend 



ajustes en fonction des taches de ehaque participant - on peut meme faire en sorte que 
I'espace de travail soit le frontend. 

4.4.1 Creer des groupes d 'utilisateurs 

Les droits partages par plusieurs utilisateurs sont definis dans les groupes auxquels ils appar- 
tiennent. Les groupes ayant moins de droits deviennent des sous-groupes. On obtient alors 
une hierarchie, illustree par I'exemple suivant : 

GroupeA: Point.dejnontage a/ 

Sous-groupe A.I : Point.dejnontage a/l/ 

Le groupe A.1 herite de tous les droits du groupe A, en plus de ses propres droits. Si le groupe 
est membre de plusieurs autres groupes et que certains droits sont contradictoires, il herite de 
I'ensemble des droits positifs. Par exemple, si le groupe A n'a pas de droit d'edition pour une 
certaine page mais que le groupe B I'a, un utilisateur appartenant aux deux groupes aura le 
droit d'edition. 

L'avantage de creer une hierarchie de groupes reside dans la possibility de maintenir tous 
les parametres utilisateur de base dans un nombre restreint de groupes (en I'occurrence un 
seul), de sorte que les reglages specifiques ne doivent etre faits que pour un groupe dans 
I'enregistrement correspondant. 

Les groupes d'utilisateurs de notre exemple devraient etre crees comme suit : 
Groupe « Global » 

Contient les parametres devant s'appliquer a tous les groupes ; de plus, on lui attribue 
des droits de lecture et d'ecriture pour toute I'arborescence fichiers, et les droits d'acces 
a une section de I'arborescence des pages via les points de montage. Ces points de 
montage sont definis par les enregistrements DBmounts. Dans notre cas, le groupe 
« Global » contient le point de montage « Contenus ». 

Groupe « Portail » 

Gere la page portail et est responsable de la publication des nouveaux elements prove- 
nant de tous les niveaux du workflow. 

Groupe pour chaque site Web 

lis ne contiennent que le point de montage (DB mount) pour acceder aux sections de 
I'arborescence du site (« B2C », « B2B » et « B2E ») ainsi qu'un point de montage (File 
Mounts) pour enregistrer leurs propres fichiers. 

Groupe « Produit» 

Ce groupe a acces a une partie de I'arborescence de chacun des sites et possede son 
propre point de montage. 

Afin de creer un groupe d'utilisateurs, passez au module Liste et cliquez sur le nom de votre 
installation a cote de I'icone representant un globe terrestre situe a la tete de votre arbores- 
cence. Vous atteindrez ainsi ce qu'on appelle le « niveau racine », qui contient les enregis- 
trements « systeme ». Vous pouvez alors ajouter un nouvel utilisateur backend a I'aide de la 
fonction Creer un nouvel enregistrement. 
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Le formulaire est divise en plusieurs sections : 
Data Access 

Entrez le nom du groupe ici. Vous pouvez aussi configurer le groupe d'utilisateurs en 
specifiant un domaine dans le champ Lock to domain, les utilisateurs ne pourront 
alors s'identifier dans le systeme que par le biais d'une adresse specifique (par exemple 
www.votredomaine.com/typo3). Cette precaution est utile si differents domaines sont 
configures sur votre serveur Web ou si vous souhaitez restreindre I'acces TYP03 a votre 
intranet. 

Access Lists 

La section Access List contient toutes les options pour la configuration de I'inter- 
face backend et pour I'acces a chaque champ de saisie et section de donnees pour 
les groupes. En cochant la case Include Access Lists le formulaire est recharge. C'est 
pourquoi il faut enregistrer toutes les donnees avant de la selectionner. Un message 
d'avertissement s'affiche des que vous activez I'option. 

L'Access List contient un menu de selection qui liste tous les champs de saisie exis- 
tants; vous pouvez les selectionner individuellement en cliquant sur leur nom. Pour 
selectionner plusieurs champs, cliquez sur les noms tout en maintenant la touche (ctrp 
de votre clavier enfoncee. Les champs de selection sont les suivants : 

Modules 

Les elements listes dans le menu de la colonne de gauche de I'interface backend 
sont appeles les « modules*. Un redacteur devrait normalement avoir acces au 
moins aux menus Web — » Page, Web — > Liste, Fichier et Fichier — » Fichiers. II 
est utile de laisser a I'utilisateur la possibilite de parametrer son interface backend, 
ainsi que la possibilite de modifier son mot de passe via le module Utilisateur — > 
Configuration. 



Figure 4. 1 : 
Apres avoir 
selectionne Include 
Access Lists, la 
section Modules 
apparait apres que le 
formulaire a ete 
recharge 



Q Include Access I 

p 

2J Module 




Tables (listing) 

A partir de cette liste, vous pouvez selectionner les tables de donnees qui seront 
visibles pour I'utilisateur. Le nombre de tables presentes varie avec le nombre d'ex- 
tensions installees, certaines comportant elles-memes des tables. C'est pourquoi, 
lors d'une nouvelle installation, vous devriez verifier les droits d'acces dans ce 
champ et le champ suivant. 
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Figure 4.2: 
Selection des tables 
qui seront visibles 
pour I'utilisateur 



Tables (modify) 

Vous selectionnez ici les tables de la base de donnees qui seront susceptibles d'etre 
modifiees par I'utilisateur. 

Page types 

Vous pouvez ici specifier quels types de pages pourront etre modifies par les 
membres de ce groupe d'utilisateurs. 




Figure 4.3: 

Selection des types de 
pages pouvant etre 
edites par I'utilisateur 



Allowed excludefields 

A I'aide des champs Excludefields, vous pouvez definir plus preeisement que dans 
le menu Tables quels champs d'edition seront visibles pour un groupe d'utilisa- 
teurs. 

Si un champ a ete defini en tant qu'« excludefield », et n'est pas selectionne 
explicitement dans cette liste, il demeurera invisible pour I'utilisateur membre de 
ce groupe. 




Pact*; C.ble 

Page: uamiare mica-a-tour 
Pave: 'Nouveau' juauu'a 
Paaei Expiration du cache 
Paga> Sane caeha 



Figure 4.4: 

Selection des champs 
d'edition qui seront 
visibles pour 
I'utilisateur 
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Explicitly allow/deny field values 

Cette option tant attendue a ete ajoutee a la version 3.7.0 en reponse au probleme 
de deactivation des types de contenu pour les groupes. Jusqu'alors, on ne pouvait 
les rendre invisibles que par le biais des options TSConfig. La selection d'un type 
de contenu desactive ce dernier pour le groupe concerne. Pour des raisons de 
securite, la deactivation des elements de contenu « Script » et « HTML» est 
consideree comme un minimum. 



Figure 4.5: 
Deactivation de 
types de contenu 
pour un groupe 



(5 Explicitly allow/deny field vak 



Contenu de la page: Type; 

□ © [Interdit] Tib-e 

□ © [interdit] I exte 

□ © [Interdit] Texte & Image 

□ © [Interdit] Image 

[ I ^ [Interdit] Lisle o puces 

□ £J [Interdit] Tableau 

O © [Interdit] Lien vers fichier 

□ [Interdit] Multimedia 

□ £ [InlefdiL] FunnulauB 












* □ Q [Tnt^rHir] T**+hnv 
□ £ [Interdit] Menu / Plan site 
I I ^ [Interdit] Inserer enregistrements 
EZI © [Interdit] Inserer un plugin 




Limit to Languages 

lei, on peut limiter I'acces des groupes a certaines langues du site. 

Custom Module Options 

Les options specifiques aux modules d'extension backend peuvent s'inserer dans 
cette section. 

DB Mounts 

Un point de montage de type Database (DB) Mounts permet d'assigner a I'utili- 
sateur un point d'entree dans I'arborescence des pages. Si I'utilisateur appartient 
a plusieurs groupes differents, et qu'un point d'entree est defini plusieurs fois, il 
apparaitra le meme nombre de fois dans le backend de I'utilisateur. C'est pourquoi 
vousdevez veiller a ne pas creer de parametresse repetant dans plusieurs groupes. 
Dans notre exemple, vous devriez configurer les groupes comme suit : 
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Groupe 



Point de montage 



Global 

Portail 

Prod u its 

B2C 

B2B 

B2E 



Contenus 
Portail 
Produits 
B2C Accueil 
B2B Accueil 
B2E Accueil 



Tableau 4.1: 
Exemple de groupes 
d'utilisateurs et leurs 
points de montage 



Filemounts 

Ce champ fait reference aux repertoires du systeme de fichiers qui sont assignes 
aux groupes d'utilisateurs dans lesquels les utilisateurs peuvent enregistrer leurs 
fichiers. Vous devez selectionner un point de montage de type fichiers. En tant 
qu'enregistrements « systeme », ces points de montage sont sauvegardes au ni- 
veau racine de Installation TYP03, tout comme les utilisateurs et les groupes. On 
peut soit les creer a cet endroit, soit y aeceder dans le formulaire d'edition de 
groupe via les icones Edit filemount, Create filemount ou List filemount situes 
a droite du champ de selection File Mounts. 

Afin de definir un point de montage, I'administrateur doit avoir cree les sous- 
repertoires correspondants dans le repertoire fileadmin, via le module Fichier — > 
Fichiers. Les noms des repertoires dans le systeme de fichiers et les noms des 
points de montage ne sont pas necessairement les memes. Dans notre exemple, 
nous donnerons les noms suivants aux repertoires deja existants : 



Groupe Norn de point de montage Chemin Tableau 4.2: 

Gbbal Med^ Medi^/ Exemples de groupes ' 

. points de montage et 

Portail Tous les fichiers fichiers/ 

chemms 

B2C Fichiers B2C fichiers/fichiers_B2C/ 

B2B Fichiers B2B fichiers/fichiers_B2B/ 

B2E Fichiers B2E fichiers/fichiers_B2E/ 

Produit Fichiers P fichiers/fichiers_p/ 



Le nom qui sera visible pour les utilisateurs est entre dans le champ Label. Dans 
le champ Path, specifiez le chemin a partir du repertoire fileadmin situe dans 
le repertoire Web de votre serveur Web. Vous pouvez aussi specifier un chemin 
absolu. Dans les deux cas, le nom du chemin doit se terminer par une barre oblique. 

Hide in Lists 

Cette option sert a supprimer I'affichage du groupe dans le module Utilisateur 
— > Centre de taches ainsi que dans le module Web — > Acces. De cette facon, on 
peut eviter que les utilisateurs envoient des messages (dans le module Utilisateur 
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— > Centre de taches) a des groupes globaux qui n'ont ete crees qu'a des fins 
administratives. 

Subgroups 

L'option Subgroups permet d'assigner le groupe en tant que sous-groupe d'un 
autre groupe dont il herite des droits et des parametres. Dans notre exemple, nous 
definirons le groupe « Global » comme ayant pour sous-groupes tous les autres 
groupes, afin que ces derniers en recoivent toute la configuration. 

TSConf 

Le dernier champ du formulaire permet d'inserer du code TypoScript. Cette section 
nommee TSConf est vue plus en detail a la section 4.8. 

Vous pouvez maintenant enregistrer et fermer le formulaire a I'aide du bouton correspondant. 
Si vousavez utilise l'option Include Access Lists lorsde la creation d'un groupe, ce dernier sera 
affiche avec une icone rouge dans I'affichage liste (module Liste). Les groupes d'utilisateurs 
n'ayant pas ete edites a I'aide de cette derniere option recoivent une icone bleue. 

4.4.2 Creer des comptes utilisateurs 

Apres avoir cree des groupes, c'est au tour des utilisateurs, qui peuvent etre assignes a ces 
groupes. Le formulaire de creation des comptes utilisateurs ne differe de celui de la creation 
de groupes que par les options pour la configuration des acces aux fichiers dans le module 
Fichier. 

Les utilisateurs devraient toujours avoir leur propre compte utilisateur car celui-ci peut etre 
utilise non seulement pour I'attribution de droits, mais aussi a des fins administratives ou de 
travail collaboratif. 

■ Les actions des utilisateurs peuvent etre tracees avec une fonction log 

■ Les utilisateurs peuvent communiquer via le module Utilisateur — > Centre de taches en 

utilisant de simples fonctions de travail collaboratif (Actualites, Taches, Notes). 

■ Les utilisateurs peuvent regler eux-memes I'affichage et le mode de fonctionnement du 
backend, ou bien recevoir un environnement de travail personnalise par I'administrateur. 

Dans la prochaine etape, nous ajouterons un utilisateur a chaque groupe, afin de pouvoir 
ensuite tester la configuration. De retour au niveau racine du systeme, selectionnez Creer un 
nouvel enregistrement et Utilisateur backend. Voici les differentes sections du formulaire : 

Donnees d'acces 

La premiere section du formulaire contient les champs pour I'introduction d'un nom 
d'utilisateur, d'un mot de passe, d'une affectation a un groupe, et l'option pour lier un 
utilisateur a un nom de domaine. 

Les noms d'utilisateurs ne doivent contenir que des lettres minuscules, les espaces ne 
sont pas admis. Lorsque vous entrez un mot de passe, il demeure visible jusqu'a ce que 
vous I'ayiez sauvegarde pour la premiere fois; il est ensuite enregistre sous un format 
de hachage MD5 dans la base de donnees et est transfere dans le backend sous cette 
forme lors de I'identification via le serveur Web. Ceci a pour consequence que le mot de 
passe oublie ne peut etre relu : il doit alors etre reassigne. 
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Groupes d'utilisateur 

On peut affilier I'utilisateur a un ou plusieurs groupes via le champ de selection. Les 
options situees a droite du champ permettent de creer, d'editer ou de lister des groupes 
d'utilisateurs. L'ordre dans lequel les groupes sont mentionnes est important lors de 
la definition des droits. Les pages nouvellement creees par I'utilisateur appartiennent 
toujours au premier groupe apparaissant dans la liste. On peut modifier ce parametre 
a I'aide de TSConfig, tout comme les droits des utilisateurs, des groupes et de tous les 
autres. Ceci est illustre a la section 4.8. L'option Lock to Domain garantit, dans des 
systemes comportant plusieurs domaines Internet, que les utilisateurs ne s'identifient 
que dans leur propre domaine. 

Admin 

La seconde section du formulaire contient l'option Admin, qui donne a I'utilisateur 
un acces illimite au systeme. Autant que possible, cette configuration ne devrait etre 
appliquee que pour un seul utilisateur dans le systeme, ou du moins etre utilisee le 
moins souvent possible. A quelques exceptions pres, un utilisateur ayant les droits d'un 
administrateur est en mesure de detruire irremediablement la configuration et tous les 
elements de contenu. 

Donnees utilisateurs 

La section suivante sert a la saisie de donnees sur I'utilisateur; I'utilisateur peut les 
modifier via le module Utilisateur — > Configuration, bien qu'il n'ait pas completement 
acces a I'enregistrement. 

DB Mounts et Filemounts 

Le systeme de filemounts et DB mounts a deja ete decrit a la section 4.4.1. Lorsque les 
options DB Mounts et File Mounts sont desactivees dans la section Mount from 
groups, I'utilisateur n'herite plus des parametres du groupe auquel il appartient en 
ce qui concerne le point de montage. De plus, cette action peut influencer les droits 
disponibles pour I'utilisateur en termes de fichiers dans son propre point de montage. 

TSConf 

Les possibilities de configuration de I'utilisateur via TypoScript sont vues plus en detail a 
la section 48. 

Vous pouvez maintenant enregistrer et fermer le formulaire : I'utilisateur est cree. Si vous quit- 
tez le systeme et que vous vous identifiez maintenant en tant qu'un des nouveaux utilisateurs, 
vous pourrez verifier votre configuration. 

Exemple 

Creez les utilisateurs suivants pour les groupes « Portail », « B2C », « B2B » et « B2E » 

Utilisateur Groupe 

Portail-redacteur Portail 

b2c-redacteur-1 B2C 

b2c-redacteur-2 B2C 

b2b-redacteur B2B 

b2e-redacteur B2E 



Tableau 4.3: 
Exemple d'utilisateurs 
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La creation de comptes utilisateurs pour les gestionnaires de produits dont nous avions parle 
ci-dessus sera vue plus tard, en meme temps que la fonctionnalite des commandes (cf. section 
4.10). 

4.5 Administration des utilisateurs a l'aide du module 
Outils — > Administration des utilisateurs 

Le module Outils contient une interface d'administration et d'analyse, dans le sous-module 
Administration des utilisateurs, qui joue un role primordial dans le travail quotidien de 
I'administrateur. Cet outil permet d'afficher I'etat actuel des droits a l'aide de plusieurs entires, 
et d'effectuer des modifications si necessaire. 

La configuration d'un utilisateur ou d'un groupe (si vous avez prealablement selectionne I'af- 
fichage de groupes) s'affiche individuellement lorsque vous cliquez sur le nom d'utilisateur ou 
de groupe. On peut entre autres y voir la liste des pages auxquelles I'utilisateur en question n'a 
pas acces. Les autres parametres sont expliques dans le tableau ci-dessous. Les options pour 
editer les enregistrements fonctionnent de la meme facon que celles du module Liste. 

L'option SU de la liste d'utilisateurs offre une option particuliere. En cliquant sur cette icone 
(SU pour Switch User - comparable a la commande UNIX du meme nom), I'administrateur 
passe dans le compte utilisateur selectionne. Cette option est tres utile pour verifier les confi- 
gurations. Dans ce cas toutefois, la seule facon de retourner a I'interface administrateur est 
de sortir de TYP03 et de s'identifier a nouveau en tant qu'administrateur. L'administrateur 
peut ainsi se glisser dans n'importe quel profil d'utilisateur, peu importe le cas, meme s'il n'en 
connaTt pas le mot de passe. 

L'affichage des utilisateurs et des groupes dans I'apercu d'analyse peut etre parametre par les 
options suivantes, pouvant etre utilisees seules ou combinees : 



Tableau 4.4: 
Affichage 
d'utilisateurs et de 
groupes 



Option 



Signification 



Filemounts 

Webmounts 

Default upload path 

Main user group 
Member of groups 
Page types access 
Select Tables 

Modify Tables 



Comparaison des utilisateurs en fonction des repertoires 
auxquels ils ont acces 

Comparaison des utilisateurs en fonction des pages de 
I'arborescence auxquelles ils ont acces 

Chemin pour les telechargements de fichiers a partir 
d'elements de page 

Premier groupe dont I'utilisateur est membre 

Autres groupes dont I'utilisateur est membre 

Types de page que les utilisateurs peuvent creer 

Tables de la base de donnees que I'utilisateur peut visua- 
liser 

Tables de la base de donnees que I'utilisateur peut modi- 
fier 
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suite 



Option 



Signification 



Non-exclude fields 
Explicit Allow/Deny 

Limit to languages 

Custom Module Options 

Modules 
TSConfig 
TSConfig HL 



Champs que I'utilisateur peut editer 

Elements de eontenu que I'utilisateur n'est pas autorise 

a inserer 

Langues dans lesquelles les membres d'un groupe 
peuvent ou ne peuvent pas editer des elements de 
eontenu 

Configuration de droits ajoutes par un module d'exten- 
sion backend 

Modules backend auxquels I'utilisateur a acces 

Parametres TSConfig pour cet utilisateur 

Parametres TSConfig pour cet utilisateur en mode 
etendu 



Si vous avez saisi les valeurs mentionnees dans les sections precedentes, I'utilisateur admin 
apparaTt comme suit, apres que vous avez coche les cases Main User Group et Member of 
Groups : 











-5j admin O^^SHu] 






3j b2b-redarteur O^BED 


^ Groupe b2b Q^^ffl 


^Global O^^ffl 
Ife Groupe b2b Q^£ig 


iy b2c-redarteur-l iHg|su| 
( b2c-redacteur-2 iHfr|sU| 


5$Jfe Groupe b2c O^iSlffi 


Global □ •JiJS 
5jt Groupe b2c Q^jSJS 


iy b2e-redad:eur g<?, ^B|iu] 


Groupe b2e Q^ffi 


53^ Global Q^^ffl 
5J| Groupe b2e Q^jElS 


5[ portail-redatfeur 0^£3S[Im] 


^ Groupe Portait Q^*ftnf 


Global O^jSlB 



Figure 4.6: 

Affichage de tous les 
groupes dont 
I'utilisateur est 
membre (droite) et du 
premier groupe dont 
il est membre (centre) 



Grace a cette distinction entre les utilisateurs, il est facile de maintenir des parametres via 
des groupes de base communs (« Global »), tout en assignant aux utilisateurs individuels des 
environnements de travail completement differents ainsi que des sections de I'arborescence 
separees. Afin de verifier la configuration de chacun des groupes d'utilisateurs et de les peau- 
finer, vous pouvez aussi passer dans chacun des comptes utilisateurs grace a SU et verifier la 
gamme de fonctions disponibles pour I'utilisateur en question. 

ATTENTION : pour qu'un utilisateur soit en mesure d'editer des pages, ces dernieres doivent 
etre rendues accessibles a I'aide du module decrit ci-dessous. 



4.6 Droits d'acces au niveau de la page 

Comme dans le systeme de fichier sous Linux, le module d'acces vous permet d'accorder des 
droits aux « utilisateurs*, aux« groupes* et a « tous les autres». Au depart, ces droits sont 
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fixes automatiquement lors de la creation d'une page, peu importe le ereateur de cette page. 
Le ereateur en devient automatiquement proprietaire, et le premier groupe auquel il appartient 
obtient les droits d'acces. Ces valeurs, ainsi que les permissions accordees automatiquement, 
peuvent etre modifiees et ajustees de faeon individuelle via TSConf (cf. section 4.8). 

Lors de son ouverture, le module Web — > Acces se refere toujours a la page selectionnee, 
affichee dans le coin superieur gauche de la vue detaillee. Le mode Utilisateur (vue d'en- 
semble) est alors active. Ce mode d'affichage montre les pages en une arborescence qui re- 
prend le nombre de niveaux pouvant etre configures. Le mode Permissions affiche les pages 
avec les droits accordes au proprietaire, au groupe et a tous les autres. 

Une fois que vous avez selectionne une page, un formulaire s'affiche. En cliquant sue I'icone 
« crayon », vous pouvez attribuer les droits de cette page au proprietaire et aux groupes. Vous 
pouvez ensuite determiner jusqu'a quel niveau de sous-pages ces parametres sont valables. 



Exemple 

Passez au module Acces et selectionnez la page « Contenus» dans I'arborescence. Ouvrez 
ensuite le formulaire d'edition en cliquant sur I'icone crayon. Assignez cette page ainsi que 
ses sous-pages au groupe utilisateur « Global » et accordez les permissions d'acces comme 
illustre dans la capture d'ecran 4.7. Lorsque vous enregistrez vos entrees, vous etes ramene a 
I'apercu utilisateur. A present, ouvrez de nouveau le formulaire d'edition de la page et reeditez 
les droits d'acces seulement pour cette page, en ramenant le nombre de niveaux a celui de 
la page actuelle. Vous avez ainsi cree une situation dans laquelle les utilisateurs d'un groupe 
peuvent editer toutes les sous-pages, mais pas la page racine, sans que I'administrateur ne 
doive intervenir pour modifier la configuration de chacune des pages. 

Le resultat final devrait maintenant ressembler a ceci : 



Figure 4.7: 
Affichage des droits 
d'acces dans le 
module Web — > acces 
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Afin de rendre toutes les sections de I'arborescence disponibles pour tous les utilisateurs, il est 
plus simple d'accorder tous les droits correspondant au groupe « Global », excepte pour les 
pages d'« Accueil » et toutes les pages ne devant pas etre modifiees. Notez que les acces sont 
deja restreints dans I'arborescence par les points de montage definis pour chacun des groupes. 
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4.7 Edition frontend pour utilisateurs backend 

Nous n'avons pas encore mentionne I'un des plus grands avantages de TYP03 : il est possible Reference 884598 

pour les utilisateurs de travailler directement sur le site, sans avoir recours au backend, ou 

comme alternative a ce dernier. TYP03 supporte par defaut la possibility d'editer les elements 

de contenu apres I'affichage d'une page, ainsi que d'ajouter de nouvelles pages. A I'aide d'une 

simple extension, les utilisateurs concernes peuvent en outre etre rediriges directement dans le 

site Web (denomme le frontend), voire travailler uniquement en tant qu'utilisateurs frontend 

(« frontend-only »). 

Une troisieme possibility consiste a guider le redacteur via un hyperlien d'une autre page a 
la page d'identification vers le backend, et d'ajouter un parametre a ce lien qui le ramenera, 
apres son identification, dans le site Web avec options d'edition, plutot que dans le backend. 
Le backend demeure ainsi accessible pour le redacteur si necessaire. 

Un lien ramenant I'utilisateur a la page d'accueil du site apres identification, ressemble a ceci : 

<a href- " typo3/index.php?redirect_url- . . / ">Identif ication au backend avec 
redirection vers le frontend</a> 

Le Panneau d'administration sert d'outil d'administration du module d'edition frontend. II 
offre les fonctionnalites d'edition requises par une interface utilisateur simplifies Bien sur, le 
panneau d'administration et ses options peuvent etre personnalises pour chaque utilisateur. 

Les administrateurs sont automatiquement autorises a utiliser I'edition frontend. Afin d'en 
donner aussi la possibility a un utilisateur, la configuration suivante est necessaire : 

1. L'affichage du panneau d'administration dans le frontend du site Web doit etre confi- 
gure. Entrez la commande suivante dans le champ Setup du gabarit de votre page : 

conf ig . admPanel = 1 

2. Afin de donner maintenant des acces de groupe aux options d'edition frontend ainsi 
qu'un panneau d'administration a des utilisateurs individuels, la configuration Typo- 
Script suivante doit etre ajoutee dans le champ TSConf du groupe de I'utilisateur. 
Pour y parvenir, entrez la commande suivante directement dans le champ TSConf ou 
utilisez I'assistant : 

admPanel { 

enable. edit = 1 

} 

Mais les options peuvent etre reglees de facon encore plus precise. En ce qui concerne 
des redacteurs particuliers, on peut utiliser la configuration suivante, qui affiche au- 
tomatiquement toutes les options d'edition mais garde le panneau d'administration 
invisible : 

admPanel { 

enable. edit = 1 

module . edit . f orceDisplaylcons = 1 
module . edit . f orceDisplayFieldlcons = 1 
hide = 1 

} 
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On peut aeceder individuellement a chaque section du panneau d'administration. Par exemple, 
meme les options du cache peuvent etre affiehees pour un redacteur a I'aide de la commande : 

enable. cache = 1 



Le panneau d'administration se compose des sections suivantes, accompagnees de leurs cles 
TypoScript : 



Tableau 4.5: Nom Cle TS 

actions da panneaa Previsualiser pTe^ 

d'administration et 

. .. T c . t Cache cache 
les eles TypoScript 

Publier publish 

Editer edit 

TypoScript tsdebug 

Info info 



Fonction 

Options de previsualisation 
Vider le cache et options du cache 
Options pour I'export statique de pages HTML 
Options d'edition 

Differentes fonctions pour le developpement de 
gabarits, surtout pour le debogage 

Informations sur la page 



Chaque partie du panneau d'administration peut etre activee separement, mais vous pouvez 
aussi I'afficher entierement : 

enable. all = 1 



plutot que de devoir activer chaque section separement. 

L'edition frontend ne se limite pas qu'aux pages et aux elements de contenu. En principe, 
n'importe quelle table de la base de donnees peut etre configuree pour l'edition frontend a 
I'aide des entrees correspondantes dans le gabarit de la page. De cette fa con, l'edition frontend 
peut aussi etre utilisee si des elements de contenu tels que des enregistrements de produits, 
d'actualites, ou d'autres contenus assignes aux pages doivent etre edites. 

Voici un exemple TypoScript qui configure l'edition de nouvelles entrees de la table de base de 
donnees tt_news : 

styles . content . editPanelPageRight = COA 
styles . content . editPanelPageRight { 

10 = EDITPANEL 

10 { 

newRecordFromTable = tt_news 

allow = toolbar , edit , move, hide, delete, new 

label = page:<B>%s</B><br>&nbsp,'creer une actualite 

edit . displayRecord = 1 

line = 4 

} 

} 



Si vous inserez cet objet avec I'expression 

page. 20 < styles . content . editPanelPageRight 
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dans le gabarit d'une page, les options d'edition grace auxquelles les actualites peuvent etre 
editees sur cette page s'affiehent. 

4.8 TSconfig — options et interface 

TypoScript ne sert pas seulement a ecrire des gabarits. Avec la meme syntaxe - excepte pour 
les parametres du type Constants et Conditions qui n'existent pas dans ce cas-ci - les valeurs 
peuvent etre definies de facon similaire a la base de registre de Windows (Windows Registry). 
On peut agir sur deux plans : 

TSConfig utilisateur 

Par utilisateur et par groupe, TSConfig peut etre utilise pour influeneer globalement 
I'affichage du backend, ou seulement les modules individuels du backend. 

TSConfig page 

Au niveau de la page, TSConfig peut etre utilise afin de configurer differentes sections 
du site Web. 

Un parametre TSConfig utilisateur peut etre utilise en remplacement d'une option specifique 
d'une arborescence, afin de permettre par exemple a un administrateur d'avoir un affichage 
different de celui d'un utilisateur dont I'espace de travail est plus restreint. 

Des proprietes TSConfig page entrees dans I'en-tete d'une page s'etendront toujours a toutes 
ses sous-pages. Afin de permettre aux administrateurs de travailler rapidement avec ce systeme, 
un outil a ete developpe, appele TypoScript Property Lookup Wizard. 

4.8.1 Assistant TSConfig : consulter les proprietes TypoScript 

Lorsque vous cliquez sur I'icone TS situee a droite du champ de saisie dans le formulaire 
d'edition de I'en-tete d'une page, d'un utilisateur ou d'un groupe, une aide en ligne s'ouvre 
et affiche toutes les options TSConfig disponibles. Cette reference en ligne est disponible pour 
toutes les installations TYP03, et I'assistant TSConfig vous permet de transferer des valeurs 
TSConfig directement dans le champ de saisie TSConfig du formulaire. 

L'assistant est tres simple : un die sur une valeur transfere directement cette derniere dans la 
fenetre TSConfig du formulaire d'edition, tout en fermant l'assistant. 

Si vous cliquez sur « + » au lieu de cliquer sur le nom, les parametres sont transferes dans le 
champ de saisie de I'editeur. L'option Entourer place le parametre entre crochets. Indenter et 
Desindenter servent a indenter les lignes, afin d'apporter plus de clarte. 

4.8.2 TSConfig utilisateur 

Pour chaque groupe d'utilisateurs, TypoScript offre une serie de configurations a I'aide de Reference 198531 
TSConfig. Vous obtenez un apercu si vous ouvrez l'assistant a partir du formulaire d'edition 
d'un compte utilisateur ou d'un groupe. Tout comme I'arborescence d'objets au niveau des 
gabarits, nous appelons cet apercu I'arborescence TSConfig utilisateur ou TSConfig page. 

Les differentes sections de I'arborescence TSConfig utilisateur correspondent aux options de 
configuration suivantes : 
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admPanel 

Configuration du panneau d'administration du frontend 
options 

Configuration generale du backend 

setup 

Contient les branches default et override; les options de configuration dans le mo- 
dule Utilisateur — > Configuration peuvent aussi etre controlees ici avec TypoScript. 
Ces deux branches contiennent les memes parametres, mais ont un effet different. Avec 
default, vous pouvez, tout comme I'administrateur, influencer les reglages par defaut 
que I'utilisateur retrouve dans le module. Si I'utilisateur choisit pour ce module de res- 
taurer la configuration par defaut, le systeme retourne aux parametres configures par 
default. Le parametre override permet de predefinir pour les utilisateurs les parametres 
qui ne peuvent etre modifies dans le module Utilisateur — > Configuration. Ceci peut 
s'averer utile du point de vue de I'administrateur, afin d'eviter, par exemple, que des 
pages ne soient eventuellement effacees recursivement. 

Mod 

La section Mod fait reference aux sous-modules du module Web. Une serie de pa- 
rametres sont disponibles afin de configurer ces sous-modules. 

ATTENTION : les options de configuration pour le module Info ne sont actuellement pas ac- 
tives ! 

Exemple 

Tout d'abord, fixons differentes options de visualisation pour tous les groupes, grace a la confi- 
guration du groupe « Global ». 

Parce que la mise en page n'utilise que les colonnes normal et droite, I'affichage des colonnes 
gauche et bordure dans le backend est inutile. On selectionne done les colonnes avec I'entree 
suivante : 

mod { 

SHARED. colPos_list = 0,2 

} 

Les colonnes sont repertories comme suit : gauche=1, normal=0, droite=2, bordure=3. 

Afin d'obtenir un affichage uniforme pour tous les utilisateurs de ce groupe, vous devez, par 
exemple, desactiver I'affichage de vignettes dans le backend, et faire en sorte que I'utilisateur 
soit redirige vers le module Utilisateur — > Centre de taches apres identification, plutot que 
vers la page d'aide : 

setup. defaults { 

thumbnail sByDef ault = 0 
startlnTaskCenter = 1 

} 

Les parametres pour les utilisateurs peuvent etre visualises et compares dans le module Outils 
— » Administration des utilisateurs avec les options TSConfig et TSConfig HL. TSConfig 
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affiche le meme contenu que le navigateur Configuration TS de la page du module Info. 
TSConfig HL met en evidence, par I'emploi de couleurs, les valeurs et la syntaxe. 

4.8.3 TSConfig page 

D'autres options s'ajoutent a celles du TSConfig utilisateur au niveau de la page. Les options Reference 168197 
suivantes peuvent aussi etre assignees aux utilisateurs et aux groupes dans leurs champs TS- 
Config. Inversement, les options TSConfig utilisateur ne peuvent pas etre entrees dans les 
pages. Au niveau de la page, les sections suivantes sont disponibles : 

TSFE 

Contient une option permettant de transferer une session utilisateur. 

mod 

Controle les menus des modules backend. 
TCEMAIN 

Concerne les options qui peuvent etre configurees pour chaque table de systeme, telles 
que celles reprenant le nombre d'entrees et les limites de temps pour I'historique d'edi- 
tion ; cette option permet aussi d'accorder des droits pour une arborescence sans tenir 
compte de la configuration des utilisateurs et des groupes pour la creation de pages. 

TCEFORM 

Fait reference a la configuration dans les formulaires du backend et des champs que 
ceux-ci contiennent. 

RTE 

Le Rich Text Editor peut aussi etre parametre dans TSConfig. Cependant, on n'utilise 
generalement pas toutes les possibility car plusieurs options ne sont plus compatibles 
avec les standards actuels du Web. 

Exemples TCEMAIN 

TCEMAIN permet de configurer les droits des utilisateurs ou des groupes pour la creation de 
nouvelles pages. L'entree suivante dans la page d'accueil d'une arborescence, 

TCEMAIN. permissions . groupid = 1 

specific que de nouvelles pages creees dans cette arborescence appartiendront automatique- 
ment au groupe « Global » plutot qu'au groupe utilisateur principal. Le groupe est identifie 
par son UID (« 1 » dans notre exemple) dans la base de donnees. L'UID est aussi affiche par 
le module Web — > Liste du backend, si vous cliquez sur I'icone d'information dans I'affichage 
liste en mode etendu ou si vous placez le curseur sur I'icone du groupe dans I'affichage liste). 

La meme entree dans le groupe « Global », dont tous les autres groupes font partie, permet 
a ces derniers d'editer toutes les pages, pour autant qu'ils y aient acces. De cette maniere, 
les utilisateurs d'un groupe (ou I'administrateur) peuvent creer des pages et ne doivent plus 
specifier les permissions pour que les utilisateurs d'un autre groupe puissent y acceder. 

Apres avoir assigne de nouveaux elements de facon permanente a un groupe, les droits de ce 
groupe sur les pages peuvent etre configures. On utilise alors la cle permissions.group : 
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TCEMAIN. permissions . group = show, editcontent 

Les valeurs disponibles sont Show (afficher dans le backend), Editcontent, Edit (editer I'en- 
tete de la page) , New (ereer de nouvelles pages), et Delete. 

Lorsque vous copiez ces elements dans le baekend de TYP03, des suffixes sont automatique- 
ment ajoutes aux noms. « Pagel » devient alors « Pagel (copy) » une fois qu'elle a ete copiee 
et inseree quelque part. Cette fonction peut etre desactivee en entrant : 

TCEMAIN. default .disablePrependAtCopy = 0 

Reference 036769 La liste exhaustive des options TCEMAIN se trouve a la reference ci-contre. 

Reference 776797 Vous pouvez trouver une liste des cles TypoScript pour parametrer les tables a la reference 
ci-contre. 

Exemples TCEFORM 

On peut parametrer tous les formulaires d'entree en ce qui concerne I'affichage et le nom des 
options grace a TCEFORM. On utilise alors la notation suivante : 

TCEFORM. [nom.table] . [nom.champ] . [cle.TSConf ] = valeur. 

Reference 538296 Les cles TSConf ainsi que les valeurs sont definies a la reference ci-contre. 

Tout d'abord, pour des raisons de securite, nous retirons I'acces a certains types de contenu 
pour notre groupe d'utilisateurs « Global » : 

TCEFORM. tt.content .CType . removeltems = search, login, div, script, html 

Les elements script et HTML devraient toujours etre supprimes dans chaque installation, parce 
qu'ils representent un risque important au niveau de la securite entre les mains de pirates 
informatiques experiment.es ayant reussi a acceder au backend. lis demeurent toutefois dis- 
ponibles dans I'assistant, qui s'affiche automatiquement si vous selectionnez I'option Creer 
du contenu de page. Nous supprimerons done I'affichage de cet assistant pour le groupe 
« Global » a I'aide de I'entree suivante : 

mod.web.layout . disableNewContentElementWizard = 1 

Dans la configuration par defaut, (sans extensions, qui etend tt_content), les elements suivants 
peuvent etre selectionnes, et sont ajoutes a I'aide de I'expression contenue dans la colonne 
« cle TS » : 



Tableau 4.6: Francais Anglais cle TS 

Elements des 



formulaires d'entree 



En-tete Header header 

Texte Text text 

Texte 6t Image Text w/image textpic 

Image Image image 
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Vous pouvezaussi specifier un autre nom pourchacun des elements. Vousdevezalorsconnaitre 
le nom de la table et du champ tels qu'ils sont entres dans la base de donnees. Les noms des 
champs sont repris dans la structure de base de donnees, que vous pouvez afficher via le mo- 
dule Outils — > Configuration. Le tableau $TCA, dans le sous-item tt_content, contient tous 
les champs de la table de base de donnees dans lesquels on peut enregistrer du contenu de 
page. 

Les en-tetes peuvent etre remplaces par vos propres noms a I'aide de la notation suivante : 

TCEFORM. [nonstable] . [champ.table] . [position] = valeur 



La ligne TypoScript suivante renomme done I'en-tete standard « Normal » du champ header 
type en « centre/en haut » : 

TCEFORM. tt_content. header_layout . altLabels . 0 = centre/en haut 
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Figure 4.8: 
Options 

personnalisees dans 
le menu d'en-tete 



L'option removeltems permet d'exclure completement certaines valeurs des listes de selection : 

TCEFORM. tt_content .menu_type . removeltems = 3,4,5 
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Le nombre entier designe la position dans le menu de selection. La ligne ei-dessus cache done 
les entrees placees en troisieme, quatrieme et einquieme position de I'element de contenu 
« Menu/Sitemap ». 

4.8.4 Ajustement du Rich Text Editor 

Le Rich Text editor (RTE) est I'editeur WYSIWYG du systeme TYP03, qui fournit aux utilisateurs 
differentes options de mise en forme et plusieurs assistants, bases sur la technologie d'lnternet 
Explorer. En principe, toutes les options offertes par Internet Explorer sont incluses, meme si la 
plupart de ces options sont en pratique incompatibles avec les principes de conception stan- 
dards de mise en page HTML. En regie generale, la gamme de fonctions du RTE est fortement 
restreinte et peut etre ajustee a vos propres specifications de mise en forme, grace aux options 
de configuration du RTE. 

Le Rich Text Editor propose essentiellement les interfaces de configuration suivantes : 

1. Configuration des champs d'entree pour lesquels le RTE devrait etre disponible ; le RTE 
peut avoir une configuration differente pour chaque champ. 

2. Possibility d'activer ou de desactiver les options d'edition dans la barre de menu. 

3. Configuration des options pour la mise en forme des paragraphes et des caracteres. 

4. Parametres de transformation pour les entrees dans le RTE lors de la sauvegarde ainsi 
que pour la publication a partir de la base de donnees. 

Configuration RTE restrictive 

Notre premier exemple se limite a une variante tres simple, pour les raisons deja evoquees. 
D'apres notre experience, cette configuration convient dans la plupart des cas. 

Le RTE peut etre active ou desactive pour certaines sections de I'arborescence via le champ 
correspondant du TSConfig page. 

Dans un premier temps, nous configurons le RTE pour qu'il ne soit disponible que pour les 
elements de contenu Texte et Texte Et image, meme si des extensions utilisant le RTE sont 
installees : 

RTE. default. disabled = 1 

RTE . conf ig . tt_content . bodytext . types { 

text .disabled = 0 

textpic .disabled = 0 

} 

Ensuite, nous specifions que toutes les options, en-tetes et autres mises en formes existantes 
ne doivent plus etre incluses dans le champ texte meme, mais que seules les mises en forme 
standards (afin de faciliter la restauration pour les redacteurs) et la mise en forme pour les 
citations doivent etre disponibles. La suppression des en-tetes dans les champs du RTE est 
particulierement utile, parce qu'elle force les redacteurs a definir le texte en plusieurs sections 
dans des elements de contenu separes, ce qui ameliore la clarte de la redaction et permet a 
d'autres options, telles que des menus de section, d'entrer en jeu. 
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RTE. classes { 
highlight { 

name = surbrillance 

value = font:bold; color:navy; 

} 

citation { 

name = citation 

value = font : italic 15px; margin- left : 2 Opx; 

} 

} 

RTE . default . classesCharacter = highlight, citation 



Dans TSConfig utilisateur, vous pouvez seulement configurer I'affichage des menus du RTE 
pour chacun des groupes ou des utilisateurs. Les options configurees iei sont disponibles pour 
tous les membres du groupe « Global », ce qui correspond a tous les utilisateurs du systeme, 
a I'aide de I'entree suivante dans le champ TSconf du groupe : 

options . RTEkeyList = class, bold, italic, link 



Les redacteurs voient alors la barre de menu suivante s'afficher (figure 4.7). 



-A B I | & 




Figure 4.9: 

Barre de menu reduite 
avec mise en forme 
personnalisee 



Comme vous pouvez le constater, les options pour inserer des tableaux ou des images via le 
menu ont aussi ete supprimees. Pour y pallier, il existe des elements de contenu prevus a cet 
effet, plus simples a controler pour obtenir une apparence uniforme, et preferables pour des 
questions de clarte. 



Configuration etendue 

Le Rich Text Editor possede plusieurs options qui ne sont pas encore visibles dans I'affichage 
par defaut, et doivent etre ajoutees. Elles comprennent un objet utilisateur avec lequel vous 
pouvez ajouter vos propres definitions. 

A I'aide de I'entree suivante - par exemple dans le champ TSConf de I'administrateur systeme 
- nous pouvons activer tous les elements disponibles du RTE : 

options . RTEkeyList = cut, copy, paste, f ormatblock, class, fontstyle, 
fontsize, textcolor, bold, italic, underline, left, center, right, 
orderedlist, unorderedlist, outdent, indent, link, table, bgcolor, 
image, emoticon, line, user, chMode 

Ci-dessous se trouve un exemple de configuration de classes : 
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RTE. default { 

colors = colorl, color2, noColor 
PROC . allowedClasses = left, right 
PROC . allowTagsOutside = IMG 
mainStyle_f ont = Verdana, sans-serif 
mainStyle_size = 12px 
mainStyle_color = #313 031 

mainStyleOverride_add . P = font-family : Verdana, 
sans-serif; font-size : 12px; 

mainStyleOverride_add.Hl = font-family : Verdana, 
sans-serif; font-size : 18px; 

mainStyleOverride_add.H2 = font-family : Verdana, 
sans-serif; font-size : 12px; 
inlineStyle . img = margin: 5px; 
hidePStyleltems = H3 , H4, H5 , H6 , pre 
classeslmage = middle, withoutmargin 
classesCharacter = red, middle, small, large, 
gray, left 

classesParagraph = left 

} 

RTE. classes { 

withoutmargin . name - Normal , without margin 

withoutmargin . value = margin : 0 ; 

red . name = red 

red .value = color: red; 

middle . name = middle 

middle. value = display: block; text-align: center; 

small. name = small 

small. value = font-size : lOpx; 

large. name = large 

large .value = font-size : 14px; 

gray . name = gray 

gray . value = color: #636563; 

left . name = alignlef t 

left . value = float : lef t ; display: block; 



La selection des couleurs peut aussi etre configuree : 

RTE. colors { 
entreprise { 

name = BT3 -Rouge 
value - #BB0000 

} 

variation { 

name = variation Burgundy 
value = #6F0311 

} 

} 

RTE . default . colors = entreprise, variation 
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Figure 4. 10: 
Couleurs 

personnalisees dans 
leRTE 



Afin de restreindre la selection de couleurs a celles que vous avez vous-meme definies, vous 
pouvez desactiver la palette par defaut comme suit : 

RTE . default . disableColorPicker=l 

Voici un exemple d'objet defini par I'utilisateur avec quelques earacteres utiles qui ne se 
trouvent pas sur un clavier : 

RTE.default.userElements { 
10 = Signes Juridiques 
10 { 

1 = ® 

1 . description = Marque deposee 

1 . content = ® 

2 = © 

2 . description = Copyright 

2. content = © 

3 = § 

3 . description = Paragraphe 
3. content = § 

} 

20 = Devises 
20 { 

1 = ¥ 

1 . description = Yen 

1. content = ¥ 

2 = £ 

2 . description = GBP 

2. content = kpound; 

3 = <f 

3 . description = Cent 
3. content = Scent; 

} 

30 = Symboles mathematiques 
30 { 

1 = Puissance 

1 . description = exposant 

1 . mode = wrap 
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1. content = <sup>|</sup> 

2 = Indice 

2 . description = Indice 
2 . mode = wrap 

2 . content = <sub>|</sub> 

3 = Symbole degre 

3 . description = symbole degre 
3. content = ° 

} 

} 

Si vous n'avez pas active tous les elements dans la barre de menu, n'oubliez pas de rendre 
I'element suivant disponible : 

RTE . default . showButtons = user 

L'illustration suivante montre le resultat : 



Figure 4.11: 
Extensions 
personnalisees via 
I'objet utilisateur du 
RTE 



i= •=«*;« iniE 9-4 



□ * 



M?tque deposee 
3 




1 

l 

4 

Cent 



Indice 



Reference 261237 Vous trouverez tous les details a la reference ci-contre, ainsi que plusieurs autres exemples de 
configuration du RTE. 

Reference 297748 Pour les developpeurs, les parametres des transformations peuvent aussi etre inseres a I'aide 
de TypoScript grace aux options de la cle PROC. 



Alternatives 

La restriction du RTE a Internet Explorer a partir de la version 5 a entraTne beaucoup d'utili- 
sateurs a envisager d'autres alternatives. Plusieurs essais differents ont eu lieu simultanement 
afin d'integrer htmlArea, un autre projet Open Source au sein de TYP03. Suite a la perfor- 
mance clairement superieure d'un de ces prototypes, les autres essais sont devenusobsoletes et 
marques comme tels dans le repertoire d'extensions du site TYP03 dont ils doivent (esperons- 
le) disparaitre bientot. L'extension htmlArea definitive a ete congue par Stanislas Rolland. 
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L'adresse suivante presente une documentation complete a ce sujet : http://typo3.org/docu- 
mentation/document-library/rtehtmlarea/. 



4.8.5 Le module Web — > Info — > Configuration TS de la page 

Maintenant que vos entrees pages sont cachees dans les formulaires d'en-tete de certaines 
pages, il n'est pas si simple de retrouver quelles valeurs ont ete entrees et a quels endroits. 



Configuration TS do la page 



* — (permission!) 
(9roupid]=l 
(dijablePrependAfcCopy]-t 

[TCEFORM] 

(tt content] 



-:--rr 



*eb layout | 

-^rilcahl»N»vi'rknr»nrF!em»ntwir>rii]=l 

~-|RT£i 

H disabled |-1 
!_^rlst«»«0.h»f*f 
— (eontiq | 

—i] 

i~|body4cxt| 
L_[l»,...] 

i '-C '''"'I- 

!— [tentpie] 

— (dassesj 



[otaoon] 



' [value]=fent9talic 1 



Figure 4. 12: 
Configuration 
TSConfig valables 
pour une page prise 
au hasard dans 
I'arborescence 



Le sous-module Info resout ce probleme grace au mode Configuration TS de la page : il 

affiche la configuration active de la page selectionnee. Vous pouvez choisir d'afficher toutes 
les entrees TSConfig ou seulement certaines sections. 



4.9 Creer des Workflows simples 

Dans la vue appelee « niveau racine », qui s'affiche dans le module Liste lorsque vous cliquez 
sur le nom correspondant a I'icone en forme de globe terrestre tout en haut de votre arbores- 
cence de pages, vous pouvez creer des enregistrements de toute sorte. Si I'extension workflow 
est installee, vous pouvez maintenant creer un nouveau workflow dans la table Workflows en 
bas de I'affichage liste. Si cette extension ainsi que celles qui en dependent ne sont pas en- 
core installees, passez d'abord au gestionnaire d'extensions. Le chapitre 6 donne I'information 
necessaire a I'insta Nation d'extensions. 
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Figure 4. 13: 
Droits d'acces pour 
les pages de creation 
d'actualites 



4.9.1 Configuration d'un workflow 

La configuration d'un workflow implique la presence d'une arborescence de pages et d'au 
moins deux groupes d'utilisateurs backend, avec leurs membres respectifs. Ce module, simplifie 
pour I'instant, propose trois profils d'acteurs : le gestionnaire de taches, qui peut assigner des 
taches aux utilisateurs, I'auteur, qui cree de nouveaux elements de contenu, et le redacteur, 
qui revise ce contenu et le public 

II y a ici differentes facons de publier : 

■ Par defaut, les nouvelles pages et les nouveaux elements de contenu sont invisibles, et 
demeurent caches jusqu'a ce qu'ils soient publies par le redacteur. 

■ De nouvelles pages et de nouveaux elements de contenu sont crees dans une partie privee 
du site puis, apres validation, le redacteur les deplace vers une partie du site predefinie dans 
le workflow. 

Cette facon de proceder facilite la mise en pratique du principe de « double revision » dans 
les procedures de redaction. Des workflows plus complexes peuvent etre simules en eombi- 
nant deux workflows, mais ces options laissent encore a desirer si on considere que le role de 
TYP03 est d'etre au centre des procedures d'entreprise avec les retours d'information que cela 
implique. 

C'est pourquoi un projet a ete lance, impliquant Integration de TYP03 avec un editeur et 
un moteur de workflows respectant les standards WfMC. Lors qu'il sera introduit, toutes les 
options d'affichage seront revues pour creer des workflows plus sophistiques. 

4.9.2 Exemple : workflow d'Actualites 

Les utilisateurs du groupe « Portail » devraient etre en mesure d'assigner des taches aux uti- 
lisateurs du groupe « B2C», en appelant un workflow predefini dans le module Utilisateur 
— > Centre de taches. Afin de pouvoir creer un workflow, la page cible, le groupe d'utilisateurs 
cible ainsi que les extensions necessaires doivent etre disponibles. 

Preparation : pour notre exemple, creez une page « Actualites » dans la page « Contenus », 
et ajoutez-lui deux sous-pages. Nous nommerons « En ligne » la page sur laquelle les actua- 
lites doivent etre enregistrees pour etre ensuite publiees dans le portail et dans les sites, et 
« Brouillon » la page sur laquelle elles sont creees et edifies en attendant leur publication via 
le workflow. 

Ensuite, a I'aide du module Web — > Acces, accordez les droits suivants aux nouvelles pages : 
« Actualites » : Administrateurs seulement 
« En ligne » : Administrateurs seulement 

« Brouillon » : Groupe « Global », affichage de la page, edition du contenu 
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Vous devez maintenant ajouter la page « Brouillon » comme point de montage (DB Mounts) 
pour lesgroupes« Portail » et« B2C» afin que les deuxgroupes puissent voir et editer la page. 
Si vous voulez que le groupe « Portail » soit en mesure d'editer I'article apres sa publication, 
vous devez lui donner des droits d'acces pour la page « En ligne » et I'ajouter en tant que DB 
Mount (point de montage). 
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Figure 4. 14: 
Creation d'un 
nouveau workflow 
dans le niveau raeine 



Apres avoir installe les extensions necessaires, un nouvel enregistrement de type workflow 
peut etre ajoute dans le niveau racine du systeme (affichage liste du niveau superieur de 
I'arborescence - ef. figure precedente). Le workflow comprend les sections suivantes : 

General 

Cette section comprend une case a cocher pour activer/desactiver le workflow et le 
nom du workflow, ainsi que le champ pour saisir le titre tel qu'il sera affiche pour les 
utilisateurs. La description saisie ici sera reprise dans la vue detaillee du workflow. 




Figure 4. 15: 
Formulaire de 
creation du workflow 
« Aetualites » 
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Table 

Le champ Table permet de definir le format cible du workflow. Dans sa configuration 
d'origine, a condition qu'une extension pour les actualites soit installee, les formats 
suivants sont disponibles : Nouvelles, Categorie de nouvelles, Page, Contenu de la 
page, Membre, Groupe de membre, Domaine, Langue alternative de la page et 
Note interne. Le champ Draft page ouvre le navigateur d'elements TYP03, par lequel 
vous pouvez selectionner la page dans laquelle les nouveaux elements seront edites. 
Selectionnez ici la page « Brouillon ». 

Roles 

Les groupes specifies dans Groups allowed to assign workflow ont la possibility de 
demarrer le workflow et de I'assigner aux groupes repris dans le champ Target groups 
for workflow. Line nouvelle entree est alors creee dans la liste de taches des utilisa- 
teurs du groupe auquel le workflow est assigne. Review users liste les utilisateurs qui 
peuvent verifier et publier les resultats. II est important ici de selectionner des utilisa- 
teurs individuels. 

Misc 

Vous choisissez ici si I'actualite est deplacee lors de sa publication (Move to page when 
finalizing) par le Review user ou si I'actualite passe du statut « cache » a « non 
cache ». 

Si le workflow fait reference a des pages, d'autres champs peuvent etre remplis, en 
cochant la case Set permissions when finalizing, afin de specifier le proprietaire de 
I'enregistrement - ainsi que le groupe et les droits d'acces pour le proprietaire, le groupe 
et « tous les autres ». 

Apres ce champ se trouve une option pour mettre le workflow « Actualites » en action, 
dans les Taches du module Utilisateur — > Centre de taches. II apparait alors comme 
une nouvelle tache « a faire » dans le Centre de taches de I'utilisateur. 

Le workflow evolue au fur et a mesure que le statut est modifie. Dans ce processus, chaque 
etape est enregistree dans le protocole de taches et affichee dans I'interface des utilisateurs 
concernes. Chacun des utilisateurs peut done faire des ajouts et enregistrer les taches pour la 
publication. La publication en tant que telle ne peut etre faite que par un utilisateur qui en a 
I'autorisation. 

Par consequent, dans notre exemple, I'entree actualites n'est plus marquee en tant qu'objet 
cache, et a ete transferee vers la page « En ligne». Apres que la tache a ete remplie, I'historique 
des etapes ne demeure visible que pour I'utilisateur qui a initie cette tache. 

Le workflow a ete decrit en detail du point de vue du redacteur a la section 3.4. 



4.10 Procedures et actions 

Les actions sont moins connues, et representent un concept qui est peu utilise, mais disponible 
dansTYP03 depuis la version 3.3.0. Cette approche met en ceuvre des procedures predefinies, 
qui peuvent etre completees par vos propres actions. Les actions sont disponibles dans le mo- 
dule Utilisateur — ► Centre de taches (cf. figure suivante). 



170 



4. 1 0 Procedures et actions 



ctions 



^ Configurer npuyeau gestionn.. 

Editer enreqistrement 
t ^ Liste enregistrements 
^ Reguete SQL 
^ Top priorite 



Cette fonction a ete instituee principalement afin de permettre aux administrateurs de creer 
des acees backend limites. C'est pourquoi d'autres types d'actions standards ont ete creees. 



Figure 4.16: 
Affichage des actions 
dans le module 
Utilisateur — » Centre 
de taches 



4.10.1 Types d'actions 

Les fonetions suivantes sont predefines : 

Create Backend User 

Permet aux non-administrateurs de creer des comptes utilisateurs backend. Pour y par- 
venir, on doit creer un utilisateur qui peut etre copie avec sa configuration — ce qu'on 
appelle le gabarit utilisateur (Template user). Cette fonction est tres importante dans 
des situations oil on prevoit un fort accroissement du nombre d'utilisateurs backend 
dans un groupe utilisateur cree specialement a cet effet ; I'administrateur evite ainsi les 
erreurs et un travail fastidieux. 

SQL Query 

Permet de predefinir des requetes SQL; pour y parvenir, creez d'abord une nouvelle 
action dans le niveau racine. Nommez-la et assignez-la a un ou plusieurs groupes. La 
definition de la requete de base de donnees est ensuite creee dans le module Outils 
— > Verification BD dans le menu Full Search, avec I'option Advanced Query. Apres 
avoir cree une requete, vous pouvez I'assigner en cliquant sur le bouton Save, puis en 
selectionnant Taction appropriee (Save to Action) dans le menu de selection. Cette 
action est maintenant disponible pour tous les membres du groupe specifie. Rappelez- 
vous que les utilisateurs doivent avoir le droit d'acces a la table et a la page concernees. 
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Figure 4.17: 
SQL Query : exemple 
de requete pour 
afficher de 
I'information sur les 
utilisateurs frontend 
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Record List 

Sert a selectionner une liste d'enregistrements dans une page speeifique pour etre edites 
et affiches; I'option apparait iei eomme dans I'affiehage liste en mode etendu. Cette 
option est tres utile pour permettre aux utilisateurs d'editer directement des enregistre- 
ments, des produits, des actualites, etc. - apres s'etre identifies. 



Figure 4.18: 
Exemple d'une action 
de type Record List 



Ql /Contenus/Actualites/Brouillon/ 
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Edit Record 

Vous permet d'afficher une liste d'enregistrements disperses, qu'on peut ensuite appeler 
pour les editer. Ainsi, un utilisateur n'etant implique que dans une tres petite quan- 
tity d'enregistrements rarement modifies pourrait travailler efficacement sans utiliser le 
module Web. 



Figure 4. 19: 
Liste 

d'enregistrements a 
editer, appeles par 
une action de type 
Edit Records 



NNEZ UN ENREC 
fj ) Portail 




4.10.2 Exemple : action pour creer des utilisateurs 

Ce type d'action predefinie permet aux non-administrateurs de creer eux aussi des comptes 
utilisateurs, fonction importante pour obtenir des departements et des equipes autonomes 
dans une grande societe qui, par exemple, s'occuperait de production de contenu. 

1. Tout d'abord, I'extension sys_action doit etre installee via le gestionnaire d'extensions. 

2. Afin de pouvoir definir une action pour la creation automatique d'utilisateurs, un en- 
registrement utilisateur doit etre disponible en tant qu'utilisateur gabarit {Template 
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User). Cet utilisateur est copie par Taction et recoit des informations specifiques telles 
qu'un nom d'utilisateur, un mot de passe ainsi qu'un point de montage dans I'arbores- 
cence. Creez un utilisateur « gabarit.produits ». 



Les actions sont creees dans le module Liste du niveau racine (les administrateurs peuvent 
aussi les appeler directement a-partir du centre de taches). En cliquant sur Creer un nouvel 
enregistrement, le dialogue pour un nouvel enregistrement s'affiche. Selectionnez le type 
Action. 



Figure 4.20: 
Creation d'une 
nouvelle action dans 
ie niveau racine 



) BT3-Entreprise 

... p*) Page (Dans) 

i.-3^j Cliquez ici pour I'assistant! 

5j Utilisateur backend (?) 

.^j Groupe d'utilisateurs backend (?) 

.jg> Point de montage (?) 

..^J Langue du site web (?) 

Gabarits statiques (?) 

T* Actio. g 



Dans le formulaire de creation, selectionnez I'option Create Backend User et remplissez les 
autres champs (cf. figure suivante) : 



Titre/Description 

Saisissez un titre et une description 



Assign Action to groups 

Selectionnez les groupes qui seront autorises a utiliser cette action via le centre de 
taches. Selectionnez ici le groupe « Portail ». 



User prefix 

Vous permet d'entrer une expression qui precedera le nom de tous les utilisateurs crees 
a I'aide de cette action. Dans notre exemple, entrez « pm » pour « product manager ». 
Ces utilisateurs sont ensuite regroupes dans la liste des utilisateurs backend et done 
facilement reconnaissables. 



Template user 

Choisissez I'utilisateur du niveau racine qui, a cause de ses parametres de base (y com- 
pris les champs de type Allowed Exclude Fields), servira de gabarit et sera copie. 
Selectionnez I'utilisateur « gabarit.produits » cree plus tot. 
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.4] Conhgurar nouvaau gaitionnaira produit 



Figure 4.21: 
Formulaire d'action 
pour la creation d'un 
gestionnaire produit 
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Groups which may be assigned through the action 

On peut aussi choisir a quel groupe ce nouvel utilisateur sera affilie dans la liste pro- 
poses Choisissez le groupe « Global ». 

Create User Home Directory 

Dans le champ All configuration de I'outil d'installation, vous pouvez entrer les deux 
valeurs suivantes : 

$TYP03_CONF_VARS [ "BE" ] [ "userHomePath" ] 
$TYP03_CONF_VARS [ "BE" ] [ " lockRootPath" ] 

On doit bien sur avoir les droits d'ecriture sur le repertoire specifie. 

L'action est creee lorsque vous I'enregistrez. Les utilisateurs du groupe correspondant peuvent 
maintenant la trouver dans leur module Utilisateur — > Centre de taches. En tant qu'admi- 
nistrateur, vous pouvez aussi appeler Taction a partir de ce module pour verifier les champs 
d'entree visibles d'une part et tester la fonction d'autre part. 



Figure 4.22: 
Formulaire de 
creation d'utilisateur 
dans le module 
Utilisateur — » Centre 
de taches 
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4.1 1 Administration des utilisateurs frontend 

Les utilisateurs frontend (« FEUtilisateur ») sont des visiteurs d'une page Internet qui ob- 
tiennent davantage de droits, en s'enregistrant ou en se faisant creer un compte par I'ad- 
ministrateur, afin d'acceder a des elements de contenu proteges ou d'utiliser des fonctions qui 
ne sont pas disponibles pour des utilisateurs non-enregistres. 

Les utilisateurs frontend peuvent etre repris dans des groupes qui se voient ensuite assigner 
les dites permissions au niveau d'une page, ou pour des elements de contenu specifiques. 

Le systeme d'utilisation frontend fournit une base pour accorder les droits d'aeces et, si neces- 
saire, les droits d'edition aux visiteurs du site Web qui se sont identifies correctement. TYP03 
propose une serie de plugins frontend afin de rendre ce type d'edition possible. Un livre d'or 
ou une carte de voeux virtuels sont des exemples simples d'utilisation du frontend. La liste des 
extensions disponibles est tenue a jour dans le gestionnaire d'extensions. Dans le backend, les 
utilisateurs frontend et leur groupe sont crees dans une page de type Dossier Systeme. 



4.1 1.1 Creation de groupes d 'utilisateurs 

Pour des besoins de clarte, les comptes utilisateurs et les groupes d'utilisateurs sont enregistres 
dans une section differente de I'arborescence. Creez une nouvelle page a cet effet. Selectionnez 
le type de page Dossier Systeme et nommez-la « FEUtilisateur ». En selectionnant I'extension 
Membres dans le menu Contient le plugin, vous assignez une icone appropriee au repertoire. 

Fonctions 

J FEUtilisateur 
Corbeille 



Figure 4.23: 
Groupes et 
utilisateurs frontend 



Retournez maintenant au module Page en cliquant sur Enregistrer et termer le document. 

Vous pouvez ajouter un nouveau groupe d'utilisateurs en cliquant sur Creer un nouveau 
contenu. Creez le groupe « B2B » et confirmez I'enregistrement en cliquant sur Enregistrer 
et termer le document. Repetez le processus, creez un nouveau repertoire dans la section de 
I'arborescence « B2E » et ensuite, a I'interieur de ce repertoire, le groupe « B2E ». 

Vous pouvez maintenant voir tous les groupes et utilisateurs dans I'affichage liste. 



4.1 1.2 Creation de comptes utilisateurs 

La prochaine etape consiste a ajouter des utilisateurs individuels au groupe d'utilisateurs. Afin 
de remplir les differentes taches dans notre exemple, nous creerons un utilisateur « entre- 
prise.1 » et « employeJ » dans leurs groupes et repertoires respectifs. Completez un maxi- 
mum de champs lors de leur creation, afin de decouvrir la validation automatique de certains 
types de champ, et de pouvoir par la suite tester I'interaction avec d'autres applications - 
telles que le systeme DMAIL - avec ces elements de contenu de la base de donnees. 
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4.11.3 Identification 

Vousdevez prevoir quelque part dans votre site un endroit oil les utilisateursfrontend pourront 
s'identifier. Inserez un element de contenu de type Identifiant dans une page. Compte tenu du 
fait queTYP03 est capable de gerer plusieurs sites dans un meme systeme, et que vous voudrez 
probablement garder les utilisateurs Internet des differents sites dans des sections separees, 
le systeme doit savoir a quel enregistrement le formulaire d'identification fait reference. C'est 
pourquoi vous devez saisir I'expression suivante dans les constantes du gabarit de la page ou 
se situe I'identifiant : 

styles . content . loginf orm.pid = 50 



« 50 » fait ici reference a I'UID du Dossier Systeme dans lequel vous avez cree les utilisateurs 
et les groupes un peu plus tot. Vous trouvez cet UID en cliquant sur I'icone Info qu'on retrouve 
dans le module Liste. L'UID de cet enregistrement apparait a la derniere ligne au bas de la 
fenetre d'information. 



Figure 4.24: 
Information dans le 
module Liste 



CD E» 

Norn d'utilisateur ; 
<5 entreprisel 




Nom de groupe ; 
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Afficher les informations 



II est aussi possible (et plus rapide) d'afficher I'UID en deplacant votre curseur sur I'icone du 
dossier dans I'arborescence. 



Figure 4.25: 
Affichage de I'UID en 
plaeant la souris sur 
I'icone 



Fonctions 
FEUtilisateur 
oi-beil le 

id^5ol 




4.1 1 .4 Assigner des pages et des elements de contenu 

Afin d'assigner du contenu dont vous voulez reserver I'acces a ce groupe, afficher le formulaire 
d'en-tete de la page desiree ou le formulaire d'edition de n'importe quel element de contenu. 

Dans la derniere section du formulaire se trouve I'option Acces. Vous pouvez selectionner un 
des groupes d'utilisateurs que vous avez crees precedemment. L'option Cache a la connexion 
cache automatiquement le contenu de la page apres que I'utilisateur s'est identifie. Afficher 
a toutes les connexions affiche le contenu lorsque I'utilisateur s'est identifie, peu importe 
son groupe d'appartenance. L'option Inclure les sous-pages etend la protection de I'acces a 
toute la section de I'arborescence se rattachant a la page, et I'icone de la page comporte alors 
deux petites fleches. 

Exemple 

Nous executons a present les deux etapes suivantes de notre exemple : 
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1. Inserez des elements de eontenu Identifiant dans les pages « Aeeueil B2B » et « Accueil 
B2E ». 

2. Assignez les deux pages aux groupes d'utilisateurs frontend correspondants et activez 
I'option Inclure les sous-pages. 



Access Inclure les sous-pages: 


Cacher a la connexion 

Afficher a toutes les connexions 

CROUPES UTILISATEURS: 






FEGroupAl^ 

FEGroupB 

FEGroupC 





Figure 4.26: 
Assignation d'un 
enregistrement a un 
groupe d'utilisateurs 
frontend 



Ajoutez la ligne suivante dans la section Setup du gabarit des pages « Accueil B2B » et 
« Accueil B2E » : 

styles . content . loginf orm.pid = uid 



"uid" doit etre remplace par les UID respectifs des pages FEUtilisateur dans lesquelles 
sont enregistres les groupes d'utilisateurs. 



4.11.5 Perspectives 

Des extensions ont reeemment apporte plusieurs ameliorations au systeme des utilisateurs 
frontend. II est desormais possible - et il s'agit d'un changement tres attendu - d'assigner 
plusieurs pages et elements de eontenu a differents groupes d'utilisateurs en meme temps. 
Une extension correspondante du noyau de TYP03 est aussi en cours de developpement, ainsi 
que la possibility d'afficher la hierarchie des groupes dans la selection. 

Le systeme d'utilisateurs frontend fournit principalement la base pour la personnalisation et 
I'edition desfonctionnalitesde portail. Son developpement se poursuit, pousse pardesattentes 
sans cesse grandissantes. C'est pourquoi il est recommande, suivant les fonctionnalites prevues 
dans votre site, de verifier regulierement quelles sont les nouvelles possibility offertes par les 
extensions. 



4. 1 2 Statistiques et logs 

Grace a une serie de parametres du systeme, TYP03 peut afficher des statistiques d'utilisation 
du logiciel a tous les niveaux : allant du travail des redacteurs aux statistiques des visiteurs 
du site, en passant par le type de navigateur utilise, jusqu'a supprimer I'information sur les 
enregistrements de donnees dans TYP03. 

Les notions des statistiques a propos des visiteurs - tellesque le nombre de visites par page, les Reference 471055 
intervalles de temps entre les visites ou les donnees systeme du visiteur - etant generalement 
suffisamment familieres, nous n'abordons ici que les donnees propres a TYP03. Des que vous 
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etes confronte a I'analyse des performances de votre site Web, une serie d'outils sont a votre 
disposition. Une liste de liens (vers des documents en anglais) proposes par le « Centre for 
Information Quality Management » sont disponibles (voir la reference ci-contre). 



4.12.1 Le module Web -> Info 

Ce module comporte quelques options d'analyse interessantes : 

Arborescence (vue d'ensemble) 

Trois options sont disponibles dans cette vue d'ensemble : Parametres de base, Cache 
et age, et Enregistrement (vue d'ensemble). Tous les parametres concernant les pages 
de I'arborescence s'y trouvent et peuvent etre edites directement. 

Localisation (vue d'ensemble) 

La vue d'ensemble de la localisation est relativement nouvelle et propose une facon 
simple et rapide de voir quelles pages ont ete recemment modifiees dans la langue par 
defaut, et de verifier si leur traduction existe dans les autres langues. 

Log 

Affiche la meme information que le module Outils — > Fichier journal, mais seulement 
pour la partie de I'arborescence selectionnee ; vous constaterez cette difference en lisant 
plus loin la description du module. 

Configuration TS de la page Comme nous I'avons deja decrit a la section 4.8, cette 
option affiche les entrees valides dans les champs TSConfig de la page selectionnee. 

Statistiques d'affichage 

Dans un souci d'exhaustivite, nous devons mentionner ici que TYP03 possede dans le 
module Info une fonction rudimentaire qui affiche les acces aux pages. Son developpe- 
ment a ete freine par I'arrivee d'un outil de statistiques externe, AWStats. Nous recom- 
mandons fortement I'util isation de ce dernier, qui demeure inegale pour I'analyse des 
fichiers log du serveur dans TYP03. 



4. 1 2.2 Integration d'AWStats 

Le module AWStats, developpe par notre auteur Rene Fritz, propose une analyse des statis- 
tiques d'un site Web. 

AWStats est une extension qui doit d'abord etre installee dans le systeme - comme decrit dans 
le chapitre sur le gestionnaire d'extensions. Puisque I'extension integre le logiciel AWStats, ecrit 
en Perl, Perl doit etre installe sur le serveur. 

Dans le fichier localconf.php, specifiez ou TYP03 devra ecrire ses fichiers log devant etre ana- 
lyses par AWStats. Utilisez a cet effet le champ de I'lnstall Tool (dans le module Installation) 
sous All Configuration : 
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Path where TYP03 should write webserver-style logfiles to. This path must be write-enabled 
for the webserver. If this path is outside of PATH_site, you have to allow it using 
[BE][lockRootPath] 



fileadmin/ 



Vous pouvez specifier n'importe quel repertoire, sans oublier que TYP03 doit en avoir les droits 
d'ecriture. Les fichiers log generes par TYP03 sont eerits en format Apache et peuvent aussi 
etre analyses par d'autres outils qu'AWStats. 

Le code TypoScript suivant doit maintenant etre entre dans le gabarit de base du site Internet, 
afin d'activer la generation de fichiers log : 

config.stat = 1 

conf ig. stat_apache = 1 

conf ig. stat_apache_logf ile = domaine.txt 



Figure 4.27: 
Specification du 
chemin pour 
i'enregistrement des 
fichiers log afin d'etre 
analyses par AWStats 



Vous pouvez configurer un autre fichier log a n'importe quel endroit de I'arborescence avec 
config.stat_apache_logfile, afin de creer des statistiques independantes pour des sections 
specifiques. II est logique de creer un fichier log pour chaque site ou domaine au sein d'une 
installation TYP03. 

L'expression : 

conf ig. stat_mysql = 0 



permet de desaetiver I'option de TYP03 qui enregistre les donnees log dans sa propre table 
de statistiques. Le fichier domaine.txt doit maintenant etre cree dans le repertoire specifie. Si 
vous avez choisi le repertoire fileadmin/, comme nous le faisons dans I'exemple, vous pouvez 
creer un fichier correspondant dans le module Fichier — > Fichiers a I'aide de la commande 
Nouveau. 

Pour finir, vous devez ouvrir et configurer le module AWStats dans le backend. Apres avoir 
clique sur Editer la configuration vous verrez les fichiers .txt et .log qui ont ete trouves dans 
le repertoire specifie. Entrez dans le champ correspondant les domaines auxquels ils doivent 
s'appliquer. Si vous avez plusieurs domaines, separez-les par une virgule. 

Apres avoir enregistre la configuration, vous devez cliquer sur le fichier log pour afficher les 
statistiques. Ce module ne s'actualise pas de lui-meme : vous devez cliquer sur Mise a jour 
immediate afin d'obtenir les dernieres statistiques. 

Apres avoir bien installe et configure AWStats, ce dernier affichera une image claire de tous Reference 866808 
les parametres importants d'analyse du trafic, tels que les impressions de pages et le nombre 
de visiteurs differents, qui peuvent etre classes par domaine. La reference ci-contre renvoie 
au site d 'AWStats oil se trouve un glossaire des termes utilises. 

4. 1 2.3 Analyse des fichiers journaux 

Le module Fichier journal fournit une vaste gamme d'informations sur les operations ef- 
fectuees dans le backend. Avec les parametres Users, Max, Time et Action, vous procedez a 
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differents types d'analyse de la base de donnees. L'information la plus importante est fournie 
par I'heure (Time) et le nom d'util isateu r (Login), qui peuvent etre completes par les operations 
effeetuees par I'utilisateur, si vous selectionnez All dans le menu Action. En plus du nom, de 
I'heure, de I'adresse IP et de I'lD de I'enregistrement edite, vous pouvez aussi afficher I'histo- 
rique d'edition a I'aide du lien His en caractere gras. 



Figure 4.28: 
La fonction log par le 
module Web — » Info 
pour une section de 
I'arborescence 



Qj ID Brouillon 

Chemin : / Contenus/Actualites/Brouillon/ 



Log 



LOG DES MODIFICATION (ADMIN) 



Utilisateurs: | Tous les utilisateurs v| Profondeur: | 3 niveaux V | Temps! | Ce mois~ 



01-08-05 

Temps Utilisateur 

12:30 [22] 



12:26 



Action Table Details 

Mettre tt_news Enregistrement 'Nouveau a la cantine: 
a jour Gaston Gastritis' (tt_news:4) mis ajour. 

Changes in fields: bodyt&xt. ->His (10) 

tt_news Enregistrement 'Nouveau dans le 

departement vente : Rene Rabbattinger' 
(tt_news:3) mis ajour. Changes in 
fields: bodytext. ->His (10) 

tt_news Enregistrement 'Nouveau a la cantine: 
Gaston Gastritis' (tt_news:4) mis ajour. 
Changes in fields: t*/e, ->His (10) 

tt_news Enregistrement 'Nouveau dans le 

departement vente : Rene Rabbattinger' 
(tt_news:3) mis ajour. Changes in 
fields: titim. >His (10) 



4. 12.4 Logs frontend 

Deux autres extensions sont disponibles, qui fournissent de l'information sur les visiteurs et les 
utilisateurs frontend du systeme : 

Reference 999758 Le Visitor Tracking System de Carlos Chiari (cle d'extension : de_phpot) enregistre le chemin 
suivi par les visiteurs dans le site Web et affiche soit le chemin suivi, soit des statistiques. 

Reference 779472 Le Login User Tracking (cle d'extension : loginusertrack) de Kasper Skarhoj enregistre les don- 
nees relatives aux sessions des utilisateurs frontend. 

Vous trouverez de l'information sur ces deux extensions aux references mentionnees ci-contre. 

4.1 2.5 Le module Verification BD 

La verification de la base de donnees effectue une analyse de coherence, et peut devenir un 
outil important pour les systemes complexes supportant une lourde charge, en relevant les 
problemes et en les aidant a les resoudre. 

Le module propose les fonctions suivantes : 
Record Statistics 

Cette option analyse toutes les entrees dans les tables de la base de donnees qui sont 
utiles a I'administrateur. Marked-deleted pages : la premiere section affiche des don- 
nees de base sur le nombre de pages qui sont cachees, qui ne le sont pas, ou qui sont 
supprimees. Cette fonctionnalite est particulierement utile parce que les pages sup- 
primees du backend ne sont pas effacees de la base de donnees ; le champ deleted de 
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la table pages est simplement mis a la valeur « 1 ». Ainsi s'il s'averait necessaire en cas 
d'urgenee de reeuperer une page effacee, eette valeur pourrait etre ramenee a « 0» 
via I'outil de base de donnees phpMyAdmin, afin de rendre la page a nouveau visible. 
Document Types affiche la frequence des differents types de page. La section Tables 
fournit de I'information sur le nombre d'entrees existantes, et affiche le nom de la table 
du systeme dans la colonne du milieu. 

Total Page Tree 

Cette option est particulierement interessante pour des installations de tres grandes 
dimensions, afin de visualiser I'arborescence dans son ensemble sans avoir a ouvrir ou 
fermer plusieurs sections. 

Database Relations 

Cette section effectue une analyse de la base de donnees selon des criteres specifiques. 

Files with no references at all 

Le systeme effectue un balayage des fichiers contenus dans le repertoire Uploads 
dans lequel sont enregistres tous les fichiers charges via le backend sur le serveur 
sans recevoir de destination specifique. Ces fichiers sont ensuite analyses pour 
voir s'ils sont references par la base de donnees. Si ce n'est pas le cas, ces fichiers 
peuvent, et devraient etre effaces, puisqu'ils ne sont plus utilises et ne peuvent 
etre appeles par les utilisateurs du backend. De plus, ils peuvent occuper un espace 
important sur le disque dur de grandes installations ; en effet, certains utilisateurs 
enregistrent des images de cette facon sur le serveur. 

Files referenced from more than one record 

Les entrees de la base de donnees qui sont copiees peuvent presenter plusieurs 
references vers un fichier du repertoire Uploads. Ces liens multiples sont analyses 
et affiches sous cette rubrique. 

Missing Files 

Cette option recherche a travers la base de donnees des liens vers des fichiers du 
repertoire Uploads qui n'existent plus. 

Select Fields/Group Fields 

Cette fonction recherche, dans les enregistrements de la base de donnees, des liens 
vers d'autres enregistrements n'existant plus. Select fields et Group fields font 
reference a differentes facons d'afficher des affectations de ce genre dansTYP03. 
Select fields est utilise pour des affectations a partir d'une selection provenant 
d'une table dans la base de donnees (ex. : groupes dans le formulaire de definition 
d'un utilisateur), et Group fields est utilise pour des affectations qui se referent a 
du contenu provenant de differentes tables de la base de donnees. 

Full Search 

Permet d'effectuer des recherches dans la base de donnees sans avoir a passer par php- 
MyAdmin. 

Raw Search in all fields 

En mode simple, vous pouvez effectuer des recherches dans toute la base de 
donnees en entrant une expression et en la soumettant. Cette action n'est pas 
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recommandee pour de tres grandes bases de donnees ou des systemes travaillant 
sous de tres grandes charges. 

Advanced query 

Offre une serie d'options interessantes. L'affichage des resultats peut etre modifie 
a I'aide des options suivantes : 

Select Records affiche les resultats en une liste pouvant etre editee directement. 

Count results se contente d'affieher le nombre d 'occurrences. 

Explain Query montre les parametres plus avances de la requete. 

CSV Export affiche le resultat en une liste dont les elements sont separes par 
des virgules. Chaque ligne contient un enregistrement avec les valeurs affichees 
entre guillemets. Ce format est particulierement utile si vous voulez traiter ces 
donnees dans des tableurs, des programmes pour faire des statistiques, etc. Le 
resultat apparait dans une fenetre au bas de la page, avec une option pour le 
telecharger. 

XML Export affiche le resultat en format XML dans une fenetre, ici aussi avec une 
option pour le telecharger. 

Make Query : apres avoir selectionne la table de base de donnees dans laquelle 
vous desirez effectuer une recherche, vous pouvez specifier des champs qui seront 
ensuite ajoutes a la liste de champs devant etre verifies. Vous pouvez specifier les 
clauses de condition de la recherche en dessous. Le nom de la table s'affiche a 
gauche, I'operateur au centre, et I'expression recherchee a droite. 

Les operateurs possibles sont contains, starts with, ends with et equals. La case 
a cocher a la droite du champ inverse les operateurs : does not contain, does 
not start with, does not end with, does not equal. 

Chaque ligne comporte les options Update, Remove condition et Add condition. 

Chaque nouvelle ligne offre aussi la possibility de changer I'ordre ou de modifier 
les conditions. La fleche vers la droite pour I'indentation vous permet de definir des 
conditions avec les operateurs « and/or ». Sous les lignes pour la definition des 
requetes se trouvent trois fonctions pour grouper le resultat. Group by permet 
d'agreger le resultat en fonction d'un champ de la table, Order by affiche les 
lignes du resultat classes selon un champ, et descending affiche le resultat en 
ordre decroissant. Limit permet de determiner le nombre maximum de lignes dans 
le resultat. 



Find Filename 

Offre une option simple pour effectuer des recherches par nom dans tous les fichiers du 
point de montage et de la source TYP03. 

Reference 592203 On peut effectuer une recherche avec des expressions regulieres; la reference ci-contre en 
donne une courte presentation, ainsi que des liens vers d'autres ressources. 



182 



4.1 3 TYP03 et le systeme de cache 



| Find filename v] 
PATTERN 

Enter regex pattern: |darkroom 



fileadmin, being checked.., 
Dirs: 34 
Files: 80 
Matching files: 



media/ not checked. 



t3lib/ not checked. 



tslib/ not checked. 



typo3/ not checked. 



typo3conf/ not checked. 



typo ttemp. being checked... 
Dirs: 5 
Files: 465 
Matching files: 



uploads/ being checked... 
Dirs: 6 
Files: 74 
Matching files: 



typo3_src/ being checked... 
Dirs: 275 
Files: 5306 
Matching files: 

ty po 3_src/ typo3/ sysext/ cm s/ts lib/me dia/f ram es/ dark rooiml_bottom.jpg 
typo3_src/typo3/ sysext/ cm s/ts lib/ media/frame s/ dark room l_mask.jpg 
typo3_src/typo3/sysexVcms/tslib/media/frames/darkroom2_bottom.jpg 
typo3_src/typo3/ sysext/ cm s/ts lib/me dia/f ram es/ darkroom2_mask.jpg 
typo3_src/typo3/sysext/cms/tslib/media/frames/darkroom3_bottom.jpg 
typo3_src/typo 3/ sysext/ cm s/ts lib/ me dia/f ram es/ dark room3_mask.jpg 
typo3_src/typo3/ sysext/ cms/tslib/ media/frames/darkroom4_bottom.jpg 
typo3_src/typo 3/ sysext/ cm s/ts lib/ me dia/f ram es/ dark room4_mask.jpg 
typo3_src/typo3/sysext/cms/tslib/media/frames/darkroom5_bottom.jpg 



4.13 TYP03 et le systeme de cache 

En tant que CMS s'appuyant sur une base de donnees, TYP03 genere des pages HTML a partir 
de plusieurs sources differentes. Depuis des gabarits HTML, via TypoScript en provenance de 
la base de donnees, ou de contenu de page provenant d'applications differentes. Les pages 
sont assemblies lorsqu'elles sont appelees et transferees vers le navigateur du visiteur. Parce 
que les fonctions des scripts PHP ainsi que les requites necessaires representent une lourde 
charge pour le serveur Web, TYP03 enregistre le resultat des pages qui ont ete assemblies 
pour la premiere fois dans une memoire tampon, qu'on appelle le cache. Ce cache diminue 
considerablement la charge sur la base de donnees et sur le serveur, surtout pour de grands 
sites Web, soumis a un trafic tres eleve. 



Figure 4.29: 
Resultat de la 
recherche de fichiers 

I Submit Qu ^yJ 
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Lors de modifications, le cache de la page en question n'est plus a jour. Plusieurs fonctions 
sont done fournies a I'administrateur afin d'effacer ce cache manuellement. 

En dessous de la liste des modules, vous trouvez deux fonctions globales pour effacer, d'une 
part le cache des pages, d'autre part le cache des fichiers de configuration. 

Le module Web — > Page propose plus d'options dans le bas de la vue detaillee. Le cache d'une 
page peut y etre vide manuellement, ainsi que celui d'un nombre determine de sous-pages. 

Le mode Cache et age de I'apercu Arborescence (vue d'ensemble) dans le module Web — > 
Info sert d'outil de controle. Vous pouvezy verifier non seulement les caches actuels des pages, 
maisvous pouvez aussi modifier la duree de leur validite en cliquantsur I'icone « crayon » dans 
le haut de la colonne Cache. 




4.14 Digital Asset Management 
4. 1 4. 1 Taches et buts du DAM 

Le Digital Asset Management System (DAM) est la reponse de la communaute TYP03 au 
besoin de gerer les images, documents et autres fichiers (ce qu'on appelle les ressources) 8 
et leurs meta-donnees afin d'enrichir le site Web. Dans ce contexte, un systeme de gestion 
de ressources digitales est un sous-systeme n'ayant pas de fonction directement visible dans 
le site Web; il sert a enregistrer, indexer et gerer les fichiers. Toutefois, il fournit aussi une 
interface simple pour les extensions qui utilisent cette information pour executer certaines 
fonctions dans le backend ou le frontend. 

Une autre innovation importante est qu'il resout un point faible de TYP03, souvent critique : 
comment manipuler les fichiers lorsqu'ils sont references a partir d'elements de contenu? 
TYP03 copie les fichiers devant etre publies dans une partie separee de I'arborescence de fi- 
chiers du systeme afin d'empeeher I'utilisateur d'acceder aux originaux. Si un utilisateur efface 
un fichier du systeme a partir du backend, la fonction de contenu affichant ces fichiers de- 
meure inchangee, et est protegee contre des erreurs de la part de I'utilisateur. Dans plusieurs 
cas toutefois, il peut etre souhaitable d'avoir un acces direct afin, par exemple, de remplacer 
un fichier qui est utilise en plusieurs endroits du site. Mais la fonction de protection empeche 
ce type d'action. 

8 NdT. : appeles assets en anglais 
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Le DAM propose une facon de configurer au eas par cas la manipulation de fichiers, afin que 
vous puissiez specifier par fichier, par groupe ou par categorie si le fichier doit etre copie vers 
un des repertoires temporaires ou s'il doit rester la ou il est et etre utilise directement a partir 
de sa source. 

Un exemple simple d'application du DAM serait une galerie reprenant des images, indepen- 
damment de I'endroit oil elles ont ete enregistrees, mais sur base des meta-donnees telles 
qu'une categorie speciale creee a cet effet, ou un mot-cle, ou encore un type de fichier. 

On pourrait aussi I'utiliser pour I'analyse statistique de I'utilisation d'images provenant d'une 
reserve de materiel a la carte, et fournir une interface qui en indiquerait les resultats dans le 
backend. 



4. 1 4.2 Integration dans TYP03 

Dans le backend, le DAM prend la forme d'un nouveau module principal et est aussi integre 
dans I'arborescence des pages. L'icone DAM ouvre toujours une vue de toutes les categories 
ainsi qu'une liste des types de fichiers. Le sous-module Media — > List montre tous les fichiers 
sous forme de liste. En pratique les modules Media — > List et Media — > File devraient rem- 
placer le module standard Fichier — > Fichiers. En fonction de la configuration, le module DAM 
est soit affiche avec toutes ces vues dans le backend redacteur, soit se limite a Integration 
DAM dans le navigateur d'elements TYP03. Dans ce cas, la gestion des donnees image est 
reservee a I'administrateur. 
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Figure 4.31: 
Le navigateur 
d'elements TYP03 
lorsque le DAM est 
installe 
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Le module Media — > List 

La liste vous permet de travailler avec et sur les meta-donnees de fichiers deja contenus dans 
le DAM, et ses fonctions sont compatibles avec le module standard Fichier — > Liste. Les 
redacteurs peuvent I'utiliser pour modifier des meta-donnees, faire des selections et les en- 
registrer. Un systeme simple d'indexation permet d'editer massivement les meta-donnees de 
ressources deja existantes. 



Figure 4.32: 
Arborescence 
symbolique du DAM 
avec trois sections 
physiques : la 
structure physique du 
repertoire, les 
categories et les 
types de medias 
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Comme on peut le voir dans la figure precedents, il existe trois arborescences differentes dans 
I'aire de navigation. La premiere reprend les fichiers du point de montage, la seconde montre 
la hierarchie des categories de contenu. La derniere est automatiquement generee a partir du 
systeme d'indexation. Les objets multimedias y sont listes et regroupes par type de fichier. 

En cliquant sur le nom d'une section de I'arborescence, une liste des medias indexes pour ce 
repertoire, categorie ou type de fichier s'affiche dans la vue detaillee. Vous pouvez y editer les 
donnees des objets medias en cliquant sur I'icone « crayon » adjacent a I'objet en question. 

Hormis I'affichage liste, il existe trois autres modes proposant leurs propres fonctions apres 
que vous avez selectionne un repertoire, une categorie ou un type de media : 

Vignettes 

Les images, s'il y en a, sont affichees sous forme de vignettes. 
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Selection 

On peut y modifier la selection, par exemple en retirant certains fichiers de la selection. 
De plus, il est possible d'enregistrer la selection et de I'echanger entre redacteurs. 

Process 

On peut y traiter les fichiers en modifiant ou en ajoutant des meta-donnees. 







Figure 4.33: 
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Le module Indexing 

Le module Indexing sert d'interface d'importation afin de fournir de la meta-information aux 
nouveaux fichiers et de les ajouter au systeme. Le module DAM cree un objet media pour 
chaque fichier insere dans la base de donnees, qui contient la meta-information correspon- 
dante. Pendant I'indexation, le module, en fonction du type de fichier, lit automatiquement 
differentes informations par defaut contenues dans la base de donnees (ex. : dimensions de 
I'image, tail le du fichier, etc.). La routine d'indexation est prevue pour permettre I'ajout de ce 
qu'on appelle des services, qui pourraient eventuellement lire de la meta-information a partir 
de fichiers PDF ou Office par exemple. 

L'indexation de meta-donnees requiert les etapes suivantes : 

1. Telechargez les fichiers vers un sous-repertoire de fileadmin via le module Fichier — > 
Liste (ou via FTP). 

2. Importez via Media — > Indexing en selectionnant le repertoire qui doit etre indexe 
dans I'arborescence fileadmin. 

3. Suivez les instructions de I'assistant d'indexation, comme le montrent les illustrations 
suivantes : 
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Figure 4.34: 
Etape I : selectionnez 
le repertoire dont 
vous voulez inserer le 
eontenu dans le DAM 



NEW INDEXING 



Choose a folder where the indexing should begin, 
[fileadmin/]: dam/ [*D 



i photos 



_J design 
_J projects 



Type Date 

08-06-04 
02-07-04 
08-06-04 
08-06-04 



054. CDP CDR 02-12-03 52 K 

41. WAV WAV 02-12-03 526 K 

Apache-Overview-HOWTO.sonnl SGML 02-12-03 47 K 

photo-bo-l,max MAX 02-12-03 46 K 

print, ps PS 02-12-03 6,7 K 

schoene maid.mid MID 02-12-03 84 K 

soiTydave.au AU 02-12-03 29 K 

Televisn,3ds 3DS 02-12-03 89 K 

telltarget.swf SWF 02-12-03 4.4 K 

The quick brown fox jumps o... DOC 02-12-03 25 K 

bio-powder.ipg JPG 02-12-03 39 K I 

B-15,fh3 FH3 02-12-03 55 K 

BlindBlind.txt TXT 02-12-03 5.3 K 

borg.ttf TTF 02-12-03 26 K 

category codes.xls XLS 02-12-03 15.0 K 



Figure 4.35: 
Etape 2 : selectionnez 
des options de la liste 



fileadmin/: dam/ 



| Indexing 



Back | Next | 



Options: 




Categorize files from folder 

Categories will be attached to files if a category has the same name as t 
files folder. 

| Use fuzzy folder/ category comparison. 



C~ Only get meta data which is still missing. 

C Overwrite current meta data with data from file. Will overwrite the meta data 
but preserve those where's n. data available from the file itself. 
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| Indexing H 



INDEXING FIELD P REDEFINITION 



Preset meta descriptions for files. 

The content may be replaced by meta content from the files themselves. 



Figure 4.36: 
Etape 3 : entrez 
/'information que 
vous voulez assigner 
aux fiehiers en vue 
d'un traitement en 
masse 



Source /Original location: 



Source /Original locatio 



Identify (slcu): 



fileadmin/: dam/ 



INDEXING SETUP SUMMARY 



| Indexing ^| 



Figure 4.37: 
Etape 4 : resume de 
vos entrees ; elles 
peuvent etre 
enregistrees en tant 
que modeles pour 
d'autres indexations 



Set Options: 



• Files will be reindexed. Only meta data will be get which is still missing. 



Meta data preset: 
Title: 

■ 

Keywords (,): 

P r « s 

Description: 
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Figure 4.38: 
Etape 5 : affichage 
des fichiers traites 



fileadmin/ 



INDEXED FILES: 
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39 files indexed in 1 sec. 
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Categories DAM 

Le module DAM eree une page specifique dans I'arborescence de pages qui sert de repertoire 
oil il place ses propres enregistrements (objets medias et categories). Les categories peuvent 
etre creees, editees et effacees via le module Web — > Liste. Tous les objets medias DAM se 
retrouvent aussi dans ce repertoire, mais sont edit.es de facon plus efficace dans le module 
Media — > List. 

4. 1 4.3 Perspectives 

Le DAM comble un manque en ce qui concerne la manipulation d'informations et de ressources 
basees sur des fichiers plutot que sur des enregistrements de la base de donnees, et deviendra 
un outil important, parallelement a I'amelioration de la gestion et de la securite, surtout la 
oil de tres grandes quantites de donnees ainsi que de I'information de tres haute importance 
sont impliquees. Le DAM introduit plusieurs innovations dans TYP03 n'ayant pas de lien di- 
rect avec sa fonction principale. L'introduction des services, ainsi que de nouvelles possibilities 
d'affichage dans le backend en constituent des exemples typiques. 

En termes de fonctions, le DAM constitue la base pour le developpement d'extensions propo- 
sant des fonctions de gestion de documents. En particulier, une passerelle entre le DAM et Ope- 
nOffice pour I'affichage et I'edition de documents pourrait mener a plusieurs developpements 
augmentant I'utilisation de TYP03 pour la gestion de contenu en entreprise. Le DAM a aussi 
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augmente les chances d'introduire une manipulation uniforme des meta-donnees pour les fi- 
chiers (ressources (4ssefs)) et pour les elements de contenu dans TYP03. Cette fonction est 
particulierement necessaire pour repondre aux exigences du Semantic Web. 9 

4.15 Administration : l'avenir 

On peut deja prevoir que TYP03 apportera plusieurs developpements a I'administration telle Reference 323622 

qu'elle est decrite au debut du chapitre (en plus de la gamme de fonctions deja existantes). 

L'arrivee d'un systeme complet de gestion des versions dansTYP03 est une etape importante 

que nous gardons en reserve. Le module de workflows sera ameliore sur cette base. A moyen 

terme, il deviendra important d'avoir un projet workflow d'envergure, dont le but sera de 

s'interfacer avec des moteurs de workflow externes. A long terme, le systeme d'administration 

des utilisateurs et d'autorisation des droits d'acces sera fortement influence par les exigences 

d'un portail d'entreprise, dans la mesure oil des travailleurs-cles peuvent s'engager dans ce 

developpement, et ou une contribution peut etre apportee par des sponsors. 

C'est pourquoi les aspects relatifs a I'administration ont beaucoup d'influence sur le futur 
du noyau de TYP03 ; ils representent un tournant majeur qui transformera un WCMS en un 
systeme de gestion de contenu professionnel plus large et fondamentalement plus fonctionnel. 



9 http://www.w3c.org/2001/sw/ 
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TypoScript 



5.1 Le role du developpeur 

5.1 .1 Le processus de mise en ceuvre 



/ think developers already know but are a little afraid to 
admit that writing software is a creative activity that requires 
a lot of interaction with the people who are going to use it. 

- Richard Gabriel 1 

Memesi une plate-forme de communication basee surTYP03 demande beaucoup de temps et 
d'efforts, ce sont les etapes d'implementation qui, au final, concretisent I'objectif initial. II est 
rare que ce processus ne connaisse qu'une solution. En effet, developper des interfaces et des 
fonctionnalites pour des utilisateurs laisse place a la creativite, mais egalement aux erreurs. 
La programmation n'est pas soumise uniquement aux lois du systeme ; grace a un planning 
a long terme, el le doit aussi servir de point de depart a la maintenance, a I'extension et a la 
correction du code. 

1 http://java.sun.eom/features/2002/1 1/gabriel_qa. html 
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Deux points faibles etroitement lies au role du programmeur conduisent frequemment a 
I'echec du developpement d'une application : 

■ Si le but de I'applieation n'a pas ete clairement explique aux personnes impliquees dans le 
projet, les descriptions de taches seront axees sur les aspects techniques du logiciel. Aussi 
sophistiquees que soient les solutions, le sueces d'une application depend habituellement 
de questions simples : est-ce que les objectifs ont ete clairement definis puis mis en pra- 
tique? Le logiciel a-t-il ete teste par des utilisateurs finaux pour verifier sa simplicity et 
son ergonomie? Finalement, toute application vit du contenu que les redacteurs ajoutent 
rapidement et qu'ils ou elles gerent. En d'autres mots : est-ce que le developpeur a pense a 
I'utilisateur ? 

■ Meme la tache de mise en ceuvre est frequemment sous-estimee. Lorsque les exigences sur 
I'implementation augmentent, il faut envisager de faire appel a un sous-traitant qui ferait 
gagner du temps et done de I'argent, sur base de son savoir-faire en la matiere. En resume : 
seule une personneconnaissantbien les conditions et les possibility du systeme concoit des 
solutions perennes qui, apres qu'elles ont muri, peuvent servir de base aux developpements 
ulterieurs. 

Ceci ne signifie pas que les outils pour creer de nouvelles applications TYP03 ne peuvent etre 
appris par n'importe qui - apres tout, e'est precisement le but de ce livre. 

5.1 .2 Prerequis et vue d 'ensemble 

Si vous voulez elaborer des applications complexes avecTYP03, une connaissance approfondie 
de TypoScript est un prerequis. TYP03 fournit differents gabarits prets a I'emploi avec lesquels 
meme un debutant peut creer rapidement un site Web. Ces gabarits sont facilement installes 
et leur apparence (couleurs, espacement et logos) peut etre modifiee a I'aide d'assistants. Mais 
si vous desirez faire des modifications ou implementer certaines fonctionnalites en reponse 
aux exigences du projet, vous devez eonnaTtre TypoScript. Ce chapitre traite des principes de 
base du langage de configuration interne de TYP03, TypoScript, et de son fonctionnement. 
Une certaine connaissance de I'HTML et du fonctionnement du World Wide Web est bien sur 
necessaire. 

Une connaissance approfondie de PHPet de I'API deTYP03 est, el le, requise uniquementsi vous 
avez besoin de fonctionnalites qui depassent le cadre de base et des nombreuses extensions 
disponibles gratuitement. Cet aspect est discute en detail au chapitre 7. 

Cette section du livre, "TYP03 pour les developpeurs'" couvre les sujets suivants. 

La section 5.2 est une introduction a TypoScript. Les enregistrementsde gabarit et la possibility 
de les mettre en cascade sont discutes, la syntaxe est expliquee, les principes de fonctionne- 
ment et d'emboitement d'objets sont illustres. 

Les objets TypoScript, les fonctions, les types de donnees et le concept d'enveloppe (wrap) sont 
traites plus en profondeur a la section 5.3. 

De nombreux outils de developpement et d'aide sont introduits a la section 5.4. 

Dans son installation de base, TYP03 contient deja une serie de gabarits standards. La sec- 
tion 5.5 vous en donne une vue d'ensemble et decrit leur champ d'application. 



5.2 TypoScript - Principes de base 



Les sections 5.6 a 5.9 s'occupent de mettre en place une maquette de base. Plusieurs concepts 
de gabarits sont compares et implemented a titre illustratif dans un scenario. Une alternative a 
I'utilisation classique des gabarits ainsi que le changementde gabarit a I'aide de type/typeNum 
sont aussi passes en revue. 

Le concept de navigation en TYP03 implique differents types de menus bases sur du texte, des 
images, des couches, une image cliquable ou des menus de selection. Leur configuration est 
expliquee a la section 5.10 a I'aide d'exemples specifiques. 

La section 5.1 1 s'interesse plus partieulierement a certaines fonctions importantes telles que 
stdWrap, optionSplit et le GIFBUILDER qui jouent un role central dans TypoScript. En utilisant 
les proprietes et les conditions de stdWrap, vous pouvez inserer des structures de controle 
dans TypoScript. Le GIFBUILDER offre un large choix en termes de manipulation d'images. 

Les sections 5.12 et 5.13 traitent de la conception d'un site avec des cadres et permettent 
d'entrevoir le futur avec des sujets tels que XHTML, I'accessibilite et TemplaVoila. 



5.2 TypoScript — Principes de base 
5.2.1 Qu'est-ce que TypoScript ? 

Un systeme de gestion de contenu doit pouvoir generer differents types de contenu et, grace Reference 387605 

au principe de separation entre le contenu et la forme, le mettre sous la forme voulue par 

chaque application. Une procedure largement utilisee est d'inserer des 5o//sesspeciales (<tag- 

name>) dans un gabarit HTML statique pour eontroler le resultat. De cette maniere, le 

contenu specifique, les fonctions, les listes ou les vues detaillees sont integres ou transformes 

vers le gabarit qui sera affiche. 

Avec I'introduction de TypoScript (TS), TYP03 fait un pas supplementaire puisque avec Typo- 
Script vous pouvez creer le gabarit HTML dynamique vous-meme, permettant un controle du 
format de sortie et de la disposition nettement plus avance que cela n'est possible avec des 
gabarits HTML statiques. 

Avec I'information definie dans TypoScript, le contenu dynamique peut non seulement etre 
insere dans un gabarit, mais il est en plus possible d'influencer I'apparence [frontend) dans les 
moindres details. La maquette graphique de base est generee completement avec TypoScript 
ou est definie a partir d'un fichier HTML. Pour naviguer, vous utilisez un menu compose de 
textes, d'images, de combinaisons d'images, d'animation Flash ou d'une simple liste deroulante. 
Les menus sont generes dynamiquement et leur apparence est controlee individuellement. 
Vous pouvez creer a la volee les graphiques a partir de textes et d'images ou determiner une 
fois pour toute leur disposition et leur contenu. De plus, TypoScript controle les options du 
backend afin de les personnaliser en fonction des utilisateurs ou des groupes d'utilisateurs. 
Comme nous I'avions mentionne au chapitre 4.1, vous specifiez par exemple quelles sont les 
fonctions d'edition dont dispose le redacteur dans le Rich Text Editor. 

TypoScript joue le role de mediateur entre I'information et les fonctions qui sont developpees 
en PHP dans le c oeur de TYP03, ou qui sont ajoutees par les extensions. De ce fait, TypoScript 
peut etre vu comme une couche intermediaire de transmission d'information aux fonctions du 
systeme. 



197 



5 TypoScript 



Pour eviter tout malentendu, nous allons preeiser ce que TypoScript n'est pas avant de definir 
ce qu'il est. La section 5.2.3 contient plus de details techniques sur le sujet. 

TypoScript n'est ni un langage de programmation ni un langage de scripting, et n'est done pas 
comparable a Java, PHP ou JavaScript. Par exemple, il n'est pas possible d'utiliser de boucles 
(for, while,...). TypoScript sert en fait de « vecteur d'information ». Vous ne devez pas ap- 
prendre un langage nouveau, et surtout pas un nouveau langage specifique. TypoScript lui- 
meme n'est pas execute a n'importe quel moment. 



Figure 5.1: 
Diagramme 
hierarchique des 
objets et de leurs 
valeurs structures 
par Tediteur de 
registre Windows 
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Si TypoScript n'est pas un langage de script, alors qu'est-ce ? Une description que vous devriez 
garder a I'esprit lorsque vous testez les limites de TypoScript est la suivante : 

TypoScript possede unesyntaxe permettantde definir de I'information de maniere hierarchique 
dans une structure arborescente simplement a I'aide de texte ASCII. De cette facon, des pa- 
rametres sont passes vers le systeme grace a TypoScript, qui agit alors en tant qu'interface. 
Seuls les objets et les proprietes non definis dans le systeme n'influencent pas le fonctionne- 
ment du frontend et du backend. La documentation (TSref) correspondant a votre version de 
TYP03 decrit I'ensemble des objets et des proprietes a votre disposition. 



Figure 5.2: 
TypoScript Object 
Browser affiehe la 
structure des objets 
et des valeurs 
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Les utilisateurs du systeme d'exploitation Windows se sont peut-etre deja familiarises avec 
I'organisation hierarchique des donneesdans le Registry, qui structure logiquement des valeurs 
a I'aide d'objets. 

De maniere similaire, les objets configures par TypoScript sont organises en une structure 
arborescente. L'outil de gabarit TypoScript Object Browser (le module Web — ► Gabarit) 
representee cette hierarchie via une interface utilisateur graphique. 

5.2.2 TSref 

Nous voudrions a present vous rappeler brievement ce qu'est la reference TSref de TypoScript ; Reference 342678 

il s'agit d'une sorte de bible pour ceux qui travaillent quotidiennement avec TypoScript, puisque 

vous y trouvez des descriptions precises de tous les objets, proprietes et fonctions disponibles. 

Ayez toujours la reference a portee de main lorsque vous travaillez avec TypoScript I TSref est 

disponible en ligne sur TYP03.org et est disponible en format OpenOffice ou PDF. Si vous ne 

possedez pas encore TSref, le moment est venu de le telecharger ! 

5.2.3 Digression : TypoScript et PHP 

Afin d'acquerir une meilleure comprehension des aspects techniques, la section suivante traite 
de la relation entre TypoScript et PHP. Passez directement a la section 5.2.4 si vous le preferez. 

Meme si, en theorie, vous pouvez creer une sortie sous n'importe quelle forme en utilisant 
PHP, le TypoScript Frontend Engine (TSFE) propre a TYP03 est utilise par defaut lorsqu'un 
site Web est appele via le fichier index.php (tslib/index_ts.php). II analyse I'information dans 
I'enregistrement de gabarit de I'arborescence des pages du site Web 2 . 

PHP traite ici les objets et les valeurs des enregistrements de gabarit qui sont structures par 
I'intermediaire de TypoScript. 

■ ['information est placee par le systeme dans un tableau PHP multidimensionnel a I'aide 
de t3lib_TSparser (t3lib/class.t3lib_tsparser.php). Ce tableau est disponible dans certaines 
applications et fonctions de TYP03. 

■ Si de I'information qui n'est pas utilisee par les fonctions des classes TYP03 est placee dans 
le tableau PHP, el le se comporte comme une variable inutilisee declaree en PHP : el le est 
ignoree et n'induit pas d'erreurs a la sortie. 

Un exemple permet de clarifier cette notion : dans le code TypoScript abstrait suivant, I'infor- 
mation analysee par PHP est placee dans un tableau multidimensionnel. 

monObjet.proprietel = valeur_x 
monObjet.propriete2 = valeur_y 
monObjet.propriete2 .propriete3 = valeur_z 

En PHP, le tableau serait directement cree, comme suit : 

$TS [ 'monObjet . ' ] [ 'proprietel ' ] = 'valeur_x'; 
$TS [ 'monObj et . ' ] [ 'propriete2 ' ] = 'valeur_y'; 

$TS [ 'monObjet. '][ 'propriete2 .'][ 'propriete3 ' ] = 'valeur_z'; 
2 Le processus detaille de restitution du frontend est decrit aux sections 5.7 et 7.5 
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ou alternativement : 

$TS = array ( 

'monObjet.' => array ( 

'proprietel' => 'valeur_x', 
'propriete2' => 'valeur_y', 
' propriete2 . ' => array { 

'propriete3' => 'valeur_z' 



) 



) 



La fonction debug() propre a TYP03 peut aussi afficher un tableau avec le resultat suivant : 



Figure 5.3: 
Affichage par la 
fonction TYP03 
debugl) de la syntaxe 
Typo3 



monObjet. 


proprietel 
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TYP03 fournit un outil pour afficher et editer TypoScript, appele TypoScript Object Browser. 
II affiche le code d'exemple de la maniere suivante : 



Figure 5.4: 
Affichage du code TS 
par le TypoScript 
Object Browser 




Exemple : H RULER 

Reference 762761 Les effets combines de TypoScript et de PHP sont illustres par I'objet de contenu (cObject) 
HRULER qui trace une ligne horizontale. Considerons le gabarit TypoScript suivant : 

page = PAGE 
page . typeNum = 0 
page. 2 0 = HRULER 
page. 2 0 { 

lineThickness = 10 

lineColor = #e6e6e6 

spaceLeft = 100 

spaceRight = 100 

} 
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A la troisieme ligne, un objet TypoScript du type HRULER est defini ; des parametres de confi- 
guration sont ajoutes dans les lignes suivantes. Les valeurs TypoScript des proprietes lineThick- 
ness, lineColor, spaceLeft et spaceRight sont placees par PHP dans un tableau. La fonction 
PHP HRULER (tsl i b/cl ass. tsl i b_co nte n t. p h p) est alors disponible pour le traitement. Voici la 
fonction PHP 3 : 

function HRULER ($conf) { 

$lineThickness = t31ib_div: : intlnRange ( $this->stdWrap ( $conf [ ' lineThickne 
ss' ] , $conf [ ' lineThickness . ' ] ) ,1,50) ; 

$lineColor = $conf [' lineColor ' ] ? $conf [' lineColor ' ] : 'black' ; 
$spaceBefore = intval ( $conf [' spaceLeft ']) ; 
$spaceAf ter = intval ( $conf [ ' spaceRight ' ] ) ; 
$content = ' ' ; 

$content.=' <table border="0" cellspacing= " 0 " cellpadding=" 0 " width="99% 
" ><tr> ' ; 

if ( $spaceBefore) { 

$content . = ' <td width= " 1 " ximg src= ». $GLOBALS [' TSFE '] ->absRef Prefix . 
'clear.gif" widths » . $spaceBef ore . ' " height="l" alt="" /></td>'; 
} 

$content.= '<td bgcolor= » . $lineColor . ' " ximg src= » . $GLOBALS [ ' TSFE ' ] ->a 
bsRef Prefix .' clear . gif " width- " 1 " height- » . $lineThickness . ' " alt-"" />< 
/td>' ; 

if ( $spaceAf ter) { 

$content . = ' <td width= " 1 " ximg src= ». $GLOBALS [' TSFE '] ->absRef Prefix . 
'clear.gif" widths » . $spaceAf ter . ' " height="l" alt="" /></td>'; 
} 

$content.= ' </trx/table> ' ; 

$content = $this->stdWrap ( $content , $conf [ ' stdWrap . ' ] ) ; 

return $content; 

} 

Ceci produit une ligne horizontal d'une epaisseur de 10 pixels et de couleur #e6e6e6. De part 
et d'autre de la ligne, un espace d'une largeur de 100 pixels est insere. 

Cet exemple illustre clairement les possibilites de TypoScript, mais egalement ses limites. Ty- 
poScript offre aux developpeurs une interface sure pour configurer des fonctionnalites exis- 
tantes, evitant les erreurs de manipulation de PHP et garantissant du code HTML correct a la 
sortie. 

En meme temps, la fonction precedents montre que le developpeur n'a pasd'emprise sur le fait 
qu'une table (au sens HTML) est utilisee lors de I'affichage de HRULER, car cette caracteristique 
ne fait pas partie de la parametrisation de cet objet. 

Ce paradigme s'applique en principe a tout objet TypoScript : sa parametrisation s'explique a 
partir des parametres qui sont passes comme arguments a des fonctions PHP. 

5.2.4 Gabarits TypoScript 

Les gabarits TypoScript determinent la maniere dont le TypoScript Frontend Engine restitue Reference 917652 

3 Pour afficher une ligne horizontale,TYP03 utilise une table, paree que les balises <HR> nesont passuffisamment 
controlees via CSS dans les navigateurs plus anciens. 
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le contenu, c'est-a-dire qu'ils determinent quel contenu est lu dans la base de donnees, est- 
ee qu'un gabarit HTML est utilise, oil le contenu est insere, etc. En outre, la transformation 
avant sa mise en forme dans le frontend est controlee par un gabarit TypoScript. En general, 
cela signifie que le gabarit decide quelles families de fontes, quelles tallies de fontes, quelles 
couleurs et quels espacements sont utilises dans le site Web. 



Figure 5.5: 
line vue d'ensemble 
du processus de 
restitution du 
frontend 



Enregistrement gabarit 
(TypoScript) 



II 

Base de 
donnees 



Site Web 





Gabarit HTML 



Les gabarits TypoScript controlent les aspects suivants dans le processus de restitution du 
contenu : 

■ Le cache 

■ Le fichier journal (log)/les statistiques 

■ Les details de I'en-tete HTML 

■ Les types de page (par exemple pour I'impression) 

■ L'agencement graphique de base (layout) 

■ Les elements de contenu (apparence et fonction) 

■ La creation de liens 

■ L'integration d'extensions et de scripts PHP 

TYP03 fournit des gabarits predefinis en fonction du domaine aborde, de sorte que les deve- 
loppeurs ne doivent pas specifier pour chaque site Web toutes les definitions requises pour 
I'edition du contenu - comme la creation de liens, par exemple. 

Avant d'expliquer ces concepts, voici quelques exercices utilisant TypoScript, pour vous aider a 
vous familiariser avec ses bases. 
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5.2.5 Hello World ! — Le premier gabarit TypoScript 



Pour que TYP03 puisse restituer le contenu, un gabarit TypoScript est necessaire. S'il manque, 
le message d'erreur « No template found ! » s'affiche lorsque la page est appelee dans le 
frontend. 



TYPO 3 



Errorl 



Figure 5.6: 
Gabarit TypoScript 
manquant 



Les gabarits TypoScript sont enregistres dans I'arborescence des pages. II y a deux types de 
gabarits : les gabarits raeines (root templates) et les gabarits d'extension (extension tem- 
plate). Mors que les gabarits raeines ont la case Rootlevel activee et se situent a la racine 
d'un site Web, les gabarits d'extension se trouvent partout dans I'arborescence des pages et 
etendent ou modifient les gabarits raeines. Les enregistrements de gabarit peuvent done etre 
mis en cascade via I'arborescence des pages, ce qui signifie que TypoScript peut fusionner ou 
remplacer des gabarits. 

II y a deux manieres de creer un nouveau gabarit : en cliquant sur I'icone d'une page dans 
I'arborescence des pages, vous creez un enregistrement du type Gabarit via I'option Nouveau 
du menu contextuel. L'enregistrement est immediatement assigne a la page selectionnee et il 
peut etre edite comme les autres enregistrements. 

La seconde maniere est d'utiliser le module Gabarit — > Info/Modify. Choisissez la page que 
vous voulez comme page racine d'un site Web (par exemple « Accueil ») dans I'arborescence 
des pages. Si aucun gabarit n'est encore assigne a la page, on vous I'indiquera et vous pourrez 
en creer un en I'inserant dans le champ du formulaire Create new website avec le bouton 
Create template for a new site. En option, vous pouvez integrer un gabarit Standard tem- 
plate pour I'utilisation du site Web via le menu de selection. Nous en reparlerons plus tard. 
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Figure 5.7: 

Un nouveau gabarit 

TypoScript avec le 

module Gabarit — > 

Info/Modify 



En supposant que vous ayez cree votre premier gabarit racine avec Create template for a new 
site, TYP03 aura cree un enregistrement de gabarit avec comme titre « NEW SITE ». Six lignes 
de code TypoScript sont deja contenues dans le champ Setup. Cette configuration TypoScript 
definit la sortie dans le frontend de la page contenant le texte « HELLO WORLD ! ». 
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TEMPLATE INFI 

Figure 5.8: ,)1|newsite 

Gabarit affiehe dans 



le module Gabarit — > 
Info/Modify 





THlei 


MEW SITE 


$ 


SitetMe: 






Description: 






Resources: 






Constants: 


(edit to view, 0 lines) 









Click here to edit whole template record 

II est possible d'editer I'enregistrement complet via le lien en bas de page ou d'ouvrir une 
selection des champs les plus importants avec les icones correspondantes. Le champ Setup 
contient les details suivants : 

# Default PAGE object: 

page = PAGE 

page . typeNum = 0 

page. 10 = TEXT 

page. 10 .value = HELLO WORLD! 



Si vous editez des champs individuellement, le cache de I'enregistrement est supprime lorsque 
vous sauvegardez, et les dernieres modifications sont prises en compte lors de la restitution 
de la page. Si vous editez tout I'enregistrement, la mise a jour se fait par le bouton Clear 
all cache au bas de I'aire du module Gabarit, ou dans le frontend via I'Admin Panel. Si les 
details ne s'affichent pas immediatement lorsque vous developpez un site, cela ne veut pas 
necessairement dire qu'il y a des erreurs de donnees. Dans ces cas-la, effacez d'abord le contenu 
du cache. 

Si I'enregistrement de gabarit est ouvert via le bouton Click here to edit whole template 
record, vous aurez une vue d'ensemble de toute I'information contenue dans chaque champ 
du formulaire. Notez que Rootlevel a ete introduit dans le gabarit suite a Taction Create 
template for a new site et sert de point de depart du site Web. De plus, les details de Clear 
Constants et Clear Setup qui ont ete places jusqu'a present dans I'arborescence des pages 
et dans les gabarits TypoScript sont ignores. Ces trois parametres permettent de definir de 
nouveaux sites Web a partir de n'importe quel endroit de I'arborescence des pages. 
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Si la page est appelee dans le frontend, vous verrez le resultat suivant 




HELLO WORLtil 



Figure 5.10: 
Affichage dans le 
frontend 



Pour mettre en forme le texte, ajoutez une ligne contenant les balises <strong> </strong> a 
la configuration TypoScript, comme ci-dessous : 



# Default PAGE object: 

page = PAGE 

page . typeNum = 0 

page. 10 = TEXT 

page. 10 .value = HELLO WORLD! 

page. 10. wrap = <strong> | </strong> 



La sortie du frontend montre desormais « HELLO WORLD ! » en gras 
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HELLO WORLD! 



Figure 5.11: 

La sortie du frontend 

avec la configuration 

modifiee 



Les possibility de TypoScript ne se limitent bien sur pas a ce petit exemple. Mais illustrons 
d'abord les fonctionnalites des gabarits. 

5.2.6 Cascade de gabarits 

Dans I'exemple suivant, nous creons un second gabarit, « mon contenu », qui vient s'ajouter 
au gabarit « NEW SITE ». Pour ce faire, utilisez par exemple I'option Create an extension 
template du module Gabarit — > Info/Modify. 

Dans un gabarit d'extension, les cases a cocher Rootlevel, Clear Constants et Clear Setup ne 

sont pas actives par defaut. Un tel gabarit peut etre place oil vous le desirez dans I'arbores- 
cence des pages. Cela permet d'une part d'associer du TypoScript a certaines arborescences de 
pages specifiques, puisque le gabarit s'active automatiquement sur la page et ses sous-pages. 
D'autre part, vous pouvez placer les gabarits dans un Dossier Systeme pour les garder comme 
bibliotheque et pour les integrer a d'autres enregistrements de gabarits. De cette maniere, les 
gabarits sont mieux structures, les fonctionnalites precises restent separees et disponibles en 
tant que composants ; de plus, le code est reutilisable. 

Dans les deux cas, vous emboitez des enregistrements de gabarit. Cette procedure s'appelle 
aussi la mise en cascade. 

L'integ ration du gabarit « mon contenu » au gabarit « NEW SITE » se fait via le champ Include 
basis template de I'enregistrement de gabarit. Vous devez ouvrir I'enregistrement de gabarit 
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complet « NEW SITE » pour I'ed iter. Pour seleetionner et integrer le gabarit « mon contenu », 
utilisez le navigateur d'elements. 



Figure 5. 12: 
Integration d'un 
gabarit de base dans 
« NEW SITE » 




Le controle de la hierarchie des gabarits se fait dans le Template Analyzer. Si vous seleetionnez 
le gabarit principal, ses dependances seront montrees dans une structure arborescente. L'ordre, 
de haut en bas, correspond a l'ordre dans lequel les gabarits sont traites par le TypoScript 
Frontend Engine. 



Figure 5. 13: 
Le Template Analyzer 
du module Web — > 
Gabarit 



CURRENT TEMPLATE: 

>Pl NEW SITE - (TypoScript) | NEW SITE 

TEMPLATE HIERARCHY: 

: .-^j=J mon contenu 
►gjNEW^ITE X 




Par exemple, I'objet temp.monContenu est defini dans le gabarit « mon contenu ». 

temp.monContenu = TEXT 

temp.monContenu. valeur = exemple de texte 



Cet objet est done disponible dans le gabarit « NEW SITE » et peut y etre reutilise, grace a la 
cascade de gabarits. 

page. 2 0 < temp.monContenu 



5.2.7 Enregistrements de gabarits 

Reference 917198 Comme nous I'avons il lustre dans la section precedente, un enregistrement de gabarit est 
absolument essentiel a la restitution du contenu dans le frontend. Un gabarit donne peut 
contenir I'information suivante : 

Template title 

Dans le champ Template title, le nom du gabarit est celui qui est affiche dans la 
vue d'ensemble du backend. Choisissez le nom que vous desirez. Toutefois, le nom 
devrait rendre compte des fonctions definies dans le gabarit puisque plusieurs gaba- 
rits differents sont souvent utilises. Les cases a cocher Deactivated, Start et Stop, 
permettent de desactiver le gabarit de maniere soit permanente, soit pour une duree 
determinee, comme pour d'autres types d'enregistrements de TYP03. 

Website title 

Specifiez le titre du site Web dans le champ Website title. Dans la configuration par 
defaut, il s'insere dans I'en-tete HTML du frontend, avant le titre de la page, et dans la 
barre de titre de la fenetre de votre navigateur : 
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<title>B2C: Produit</title> 

<title> [Titre du site web]: [Titre de la page] </title> 

Constants 

Entrez dans le champ Constants les valeurs qui remplacent les constantes auxquelles 
le code insere dans le champ Setup fait reference. Les constantes representent des 
valeurs definies pour I'ensemble du site Web qui devraient etre faciles a changer pour 
modifier en une fois des parametres tels que la ta i I le des fontes, les fontes, les couleurs 
de I'arriere-plan, ...Ne les confondez pas avec les variables telles qu'elles sont definies 
dans les langages de programmation. Les constantes sont remplacees par leurs valeurs 
dans I'ordre dans lequel elles sont entrees, et peuvent done se remplacer I'une I'autre. 

Setup 

Ce champ contient le code de configuration TypoScript, qui definit I'apparence et le 
comportement de I'application. Les constantes (valeurs globales ou proprietes variables) 
apparaissant dans ce champ sont remplacees par les valeurs correspondantes definies 
dans le champ Constants. 

Ressources 

Ce champ contient des ressources c.-a-d. des images, des masques, des fontes True- 
type, des feuilles de style, de I'HTML et des documents texte. Pour faire une reference 
a ce champ avec TypoScript, utilisez le type de donnees resource. Lorsque vous copiez 
un gabarit, les ressources du champ Resources sont egalement copiees et numerotees 
sequentiellement. Par exemple, logo.gif devient logo_01.gif. II est done judicieux de 
faire reference aux ressources a I'aide du symbole (logo*.gif). 

Clear et Rootlevel 

Les cases a cocher Clear Constants, Clear Setup et Rootlevel forment un groupe 
fonctionnel qui intervient dans le contexte des gabarits en cascade. 

Rootlevel 

Rootlevel definit I'endroit dans la structure de la page qui est pris comme point 
de depart (racine) d'une nouvelle application (un site Web). Toutes les sous-pages 
(pages-enfants) dans I'arborescence des pages heritent des proprietes de chaque 
gabarit. Si de nouveaux gabarits sont associes a certaines pages, leur code Typo- 
Script est fusionne au code des gabarits des pages definies a un niveau superieur 
(pages-parents). De cette maniere, vous pouvez surcharger a un niveau plus bas 
des valeurs qui ont ete definies dans les gabarits-parents. 
Le gabarit racine sert de point de depart a toutes les configurations d'une appli- 
cation en TypoScript jusqu'a ce qu'un gabarit definisse un nouveau Rootlevel. Un 
gabarit racine est indique avec une fleche bleue sur son icone. 

Clear Constants et Clear Setup 

Vous pouvez, grace a ces cases a cocher, arreter la mise en cascade des constants 
ou du setup de I'arborescence des pages. Un gabarit defini de cette facon n'herite 
d'aucune propriete constants ou setup des gabarits associes a des pages d'un 
niveau superieur. 
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Include static 

Une serie de gabarits standards (static templates) est fournie par TYP03 dans sa confi- 
guration de base. Ceux-ci comprennent non seulement toute la configuration Typo- 
Script pour representor des elements de contenu, mais aussi, des maquettes graphiques 
de mise en page pretes a I'emploi. Les differents types de gabarits standards sont intro- 
duits a la section 5.5. 



Figure 5. 14: 
Choix de gabarits 
standards 




u d e stati c AFTE R b a s e d O n : 



Si vous avez inclus plusieurs gabarits standards, vous determinez I'ordre de traitement 
en cliquant sur I'icone a double fleche. Vous les supprimez a I'aide de I'icone « cor- 
beille ». 

La case a cocher Include static AFTER basedOn inverse I'ordre de traitement des ga- 
barits de base (voir plus loin : Include basis template) et des gabarits standards par 
le TypoScript Engine. Dans la configuration par defaut, les gabarits de base sont traites 
apres les gabarits standards. C'est le comportement classique puisque, de cette maniere, 
vous ecrasez des valeurs dans les gabarits standards par vos propres valeurs. 

Dans I'exemple, un gabarit de base et le gabarit standard content (default) sont in- 
tegres au gabarit racine. Les configurations TypoScript qui contiennent des extensions 
(default TypoScript from Extensions) se comportent comme des gabarits standards. 
Le Template Analyzer indique I'ordre dans lequel les gabarits sont traites, de haut en bas, 
et leur structure. 



Figure 5.15: 
Template Analyzer 
montre I'effet de 
Include static AFTER 
basedOn 



Include static AFTER basedOn: 



TEMPLATE HIERARCHY: 



styles, content < default) 
j| styles, sitemap. text 
-pp] styles, header, qfxl 
content f defaultl naharit statique 
tt news TS par defaut d'E xt. 

tt address TS par defaut d'E xt. 

_ts language de TSpardefautd'Ext. 
.^g] Basis Template gabanl de base 
>g) Root Template gabarit racine x 



Include static AFTER basedOn: 



TEMPLATE HIERARCHY: 

.-(fjl Basis Template gabarit de base 
"jstyles, content (default) 
i| styles, sitemap.text 
j styles, header, gfxl 
[ content fdefaultl naharit statique 
l tt news TS par defaut d'Ext. 

] tt address TSpardefautd'Ext. 
j ts language de TS par defaut d'Ext. 
Root Template gabarit racine x 
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Include static (from extensions) 

Les extensions contiennent aussi parfois des gabarits standards. Ces derniers sont in- 
tegres dans la zone Include static (from extensions) du formulaire. Les configura- 
tions de TypoScript contenant I'extension de ext_typoscript_*.txt (default TypoScript 
from Extensions) sont automatiquement chargees pendant Installation. General Of- 
fice Displayer et CSS Styled Content sont des exemples d'extensions qui contiennent 
des gabarits standards. 




Figure 5. 1 6: 
Integration des 
gabarits standards 
d'une extension en un 
elie de souris 



Include basis template 

Les gabarits de base represented les bibliotheques personnels grace auxquelles le 
developpeur organise son code TypoScript de maniere modulaire. Les gabarits de base 
permettent de gerer TypoScript de maniere plus claire et permettent aussi d'encapsuler 
le code selon les fonctionnalites utilisees dans de futurs projets. lis representent leur 
propre enregistrement de gabarits pour lesquels les options Clear Constants, Clear 
Setup et Rootlevel n'ont pas ete selectionnees. Des gabarits de base peuvent inclure a 
leur tour leurs propres gabarits de base, formant ainsi une structure en cascade. Leurs 
icones contiennent le signe « plus » vert. 

Dans I'exemple ci-dessous, un gabarit nomme Basis Template est integre au gabarit 
Roof Template. 




Figure 5. 1 7: 
Integration d'un 
gabarit de base 



Static template files from T3 Extensions 

Lorsque le Typoscript contient du code associe a des extensions (Default TypoScript 
from extensions), I'ordre d'integration est aussi important. Combine avec la case a 
cocher Include static AFTER basedOn, le champ de selection Static template files 
from T3 extensions offre de nombreuses possibilities de mise en cascade des gabarits. 

Default (Include before if Root-flag is set) 

Cette option a pour effet d'inserer les gabarits standards d'extension avant le ga- 
barit racine. Cela est utile pour remplacer les valeurs des gabarits d'extension par 
le gabarit racine. La difference entre cette configuration et la suivante est que les 
gabarits d'extension sont uniquement integres avant si Rootlevel est active. 
Always include before this template record 

Lorsque vous optez pour ce choix, les gabarits standards de I'extension sont traites 



209 



5 TypoScript 



juste avant les gabarits correspondants. Notez que c'est la seule maniere de mo- 
difier le gabarit des extensions. 

Never include before this template record 

Cette option empeehe les gabarits standards de I'extension d'etre lus directement 
avant le gabarit considere. Ceci signifie que bien que le gabarit de I'extension soit 
actif, il ne peut etre modifie par une autre configuration TypoScript. 

Dans I'exemple qui suit, un gabarit de base (basic - st Green) est integre au gabarit 
racine (main template). Un gabarit standard (template; GREEN) est ensuite lui-meme 
integre au gabarit de base. L'extension News (tt_news) , qui comprend son propre code 
standard TypoScript, est installee. L'ordre judicieuxdans lequel les gabarits devraient etre 
lus est le suivant : d'abord les gabarits standards, ensuite le gabarit pour les extensions, 
puisque ce dernier peut remplacer des valeurs des gabarits standards, suivi du gabarit 
de base pour remplacer certaines valeurs de ses predecesseurs, et enfin le gabarit racine. 

Dans le premier cas, le reglage de base Default (Include before if Root-flag is set) est 

laisse tel quel pour le gabarit racine et pour le gabarit de base qui y est integre. Le code 
TypoScript de I'extension tt_news est lu apres basic - st Green et avant main template. 



Figure 5.18: 
Static template files 
from T3 Extensions - 

Exemple 1 



TEMPLATE HIERARCHY: 



^ styles. qmenu layer. green 
■ffi styles, content (default! 
b ctylps. citnman.ta"* 




| pluqin.meta [DEPRECIATED! 

^ tpmnlata: GRFFH 

^Tjj bajie st green gabarit dc boac 
I — | | tt ne.s TS pas cHSfault erf xt. 

re main template gabarit racine 



»<ir <t RRFFN 




Si le reglage Always include before this template record est active et que le reglage 
par defaut est conserve pour le gabarit racine, le code TypoScript de I'extension tt_news 
est lu deux fois - ce qui n'a pas beaucoup de sens. 



Figure 5.19: 
Static template files 
from T3 Extensions - 

Exemple 2 



IfcMMLAIfc HltKAKlHY: 



[styles. qmenu layer.qreen 
-ft ttylgE.rentsnt (default) 



| styles.header.af*l 
content (default) 



] tt news 

f-Qstnaia 

>[? rrdi-i t^r-:p 5'^ 



TSpar defaut d'Ext. 

gabarit de base 
TS par defaut d'Ext. 
gabarit racine 



Template tide: 

Ibasic -- st GREEN 



| Always include before this template record 



Template title: 

(main template j 

Static template files from T3 Extensions: 

| Default (Include before if Root-flag is set) _» 



Dans le dernier exemple presente ei-dessus, le reglage Never include before this tem- 
plate record pour le gabarit racine empeehe le code TypoScript des extensions d'etre 
lu juste avant main template. D'autre part, le gabarit de base force la lecture de ces 
donnees du TypoScript des extensions juste avant basic - st Green. 
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TEMPLATE HIERARCHY; 




Figure 5.20: 

Static template files 

from T3 Extensions - 

Exemple 3 



Template on next level 

Ce champ de selection fournit un moyen simple d'integrer un gabarit valide pour toutes 
les pages du niveau suivant. Ainsi, vous ne devez pas assigner un enregistrement de 
gabarit a chaque page du niveau suivant. Des changements de mise en forme pour des 
parties de I'arborescence sont done rapidement inseres. 

Description 

Decrire un gabarit et ses fonctionnalites vous aide (vous ou une tierce personnel a vous 
retrouver par la suite dans le projet. 

Backend Editor Configuration 

Ce champ permet de faire passer des styles predefinis a I'editeur CSS. Cette option n'est Reference 626488 
que rarement utilisee et sa maintenance n'est plus assuree. 

5.2.8 Constants et Setup 

Les deux champs les plus importants d'un enregistrement de gabarit sont les champs Setup 
et Constants. Setup contient la configuration TypoScript, e'est-a-dire le code TypoScript 
controlant I'apparence et le parametrage du site Web. Ce code est traite lors du processus 
de restitution du contenu. 

De son cote, le champ Constants fait passer dans le champ Setup des constantes, c.-a-d. des 
valeurs facilement manipulates ou des valeurs globales. De cette facon, vous avez une vue 
d'ensemble lorsque vous modifiez des valeurs pour des pages en particulier. Par exemple, vous 
pouvez changer la valeur d'une couleur utilisee dans diffe rents gabarits a partir d'un point 
central, au lieu de devoir la rechercher dans tous les gabarits utilises. 

La notation correspond a la syntaxe TypoScript normale : dans le champ Setup, les constantes 
sont entourees de {$ et }. 

Dans I'exemple suivant, « Hello TYPOS ! ! » s'affiche dans le frontend. 
Constants : 

monTexte . contenu = Hello TYPOS!! 

Setup : 

page = PAGE 
page { 

typeNum = 0 

10 = TEXT 
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10. value = { SmonTexte . contenu} 

} 

S'il n'y a pas de constante definie dans le champ Constants correspondant a celle appelee 
dans Setup, alors $monTexte.contenu s'affiche dans le frontend. 

La hierarehie des objets des donnees reprises dans les champs Setup et Constants est re- 
presentee clairement dans le TypoScript Object Browser (module Web — > Gabarit). Pour ce 
faire, selectionnez dans I'arborescence des pages celle dont vous voulez afficher le contenu du 
champ Setup et selectionnez le mode avec Browse : Constants ou Setup. 



Figure 5.21: 
Affichage des 
constantes dans 
I'Object Browser 



CURRENT TEMPLATE: 
>g| NEW SITE 



OBJECT TREE: 

Browse: Constants 



Faire passer du contenu par des constantes n'est bien entendu pas tres sense pour les pages 
dynamiques. II est plus interessant d'utiliser les constantes pour des valeurs telles que les 
formats et les couleurs de texte, les proprietes des images, etc., c'est-a-dire pour des valeurs qui 
sont utilisees de maniere repetee dans les applications et qui devraient etre faciles a modifier. 

5.2.9 Elements et concepts 

Le gabarit NEW SITE cree a I'aide du module Gabarit — > Info/Modify contient les lignes de 
code suivantes qui affichent dans le frontend une page HTML avec le texte « HELLO WORLD !» : 

# Default PAGE object: 
page = PAGE 

page . typeNum = 0 

page. 10 = TEXT 

page. 10 .value = HELLO WORLD! 

Les details sont traduits de maniere generique par : 

# Commentaire 
monObjet = TYPE_OBJET 
monObjet . PROPRIETE = valeur_l 
monObjet . sousOb jet = TYPE_OBJET 
monObjet . sousObjet . PROPRIETE = valeur_2 

Pour vous presenter les differentes notions, les termes et leur appellation sont repris dans un 
exemple avant d'etre definis plus en detail. 

# Default PAGE object: 

La premiere ligne est un commentaire et est done ignoree par TYP03. 

Dans la ligne suivante, page est defini par I'operateur « = » comme un objet de type PAGE. 
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page = PAGE 

Le nom page peut, en principe, etre choisi librement. Toutefois, par convention, certains noms 
sont reserves a des objets de base precis. Mors que page est utilise pour les pages a contenu 
normal, le nom plugin est reserve aux plugins (extensions). 

page . typeNum = 0 

Un objet a des proprietes, et des valeurs sont assignees a ces proprietes. typeNum est une 
propriete du type d'objet PAGE a laquelle est assignee ici la valeur 0. La sequence de caracteres 
page.typeNum definit le chemin de la propriete. 

Les lignes suivantes definissent page.10 comme un objet de type TEXT. En TypoScript, des 
listes numeriques {tableaux} sont souvent utilisees. Dans ce cas-ci, la liste numerique est une 
propriete du type d'objet PAGE. Pour les objets de type PAGE, cette liste peut a son tour 
contenir d'autres objets. Ici, 10 est defini comme un objet de type TEXT, page.10 est le chemin 
menanta cet objet. 

page.10 = TEXT 

Gardez a I'esprit que de telles listes ne peuvent pas toujours faire reference a d'autres ob- 
jets ; cela depend du type de donnees auquel appartient la liste. Vous trouverez dans TSref, la 
reference TypoScript, et dans les extensions correspondantes de I'information pertinente a ce 
sujet. 

page . 10 .value = HELLO WORLD! 

La propriete value de I'objet page.10 prend la valeur HELLO WORLD!. 
Dans la suite, nous reprenons en detail les concepts : 

Types d'objets 

TYP03 vous fournit toute une serie de types d'objets predefinis que vous pouvez utiliser 
dans vos gabarits TypoScript, par exemple les types PAGE, TEXT et IMAGE. La plupart 
des types d'objets servent a la restitution du contenu dans le frontend ; ils sont appeles 
cObjects ou objets de contenu. Les autres types d'objets sont utilises a des fins de 
configuration generale. 

Objets 

L'objet page a ete defini comme un objet de type PAGE. Puisque page est au sommet Reference 110843 

de la hierarchie, on I'appelle aussi un objet racine (toplevel object). Ces objets peuvent 

porter presque n'importe quel nom. Les noms reserves tels que lib, config, constants, 

styles ou temp sont documentes dans TSref (voir la reference ci-contre). 

L'objet page pourrait aussi etre appele monday, mais utiliser un nom descriptif aide a 

clarifier le code. Si vous voulez definir une page contenant des cadres (frame), le nom 

frameset serait par exemple un bon choix. 

Proprietes 

Un type d'objet, et par consequent un objet de ce type, a des proprietes definies preci- Reference 839954 
sement et decrites dans le document TSref. Seules ces proprietes sont prises en compte 
par les objets. Des lors, la ligne suivante n'a de toute facon aucun effet, puisque l'objet 
PAGE n'a pas de propriete appelee value. 
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page. value = Hello World! 



Aucune erreur n'est toutefois creee puisque TypoScript n'est jamais execute. 

Les proprietes d'un objet ont elles-memes un type de donnees specifique. Par exemple, 
page.typeNum est du type int, ce qui signifie que les seules valeurs valides sont des 
nombres entiers. Les types et leurs parametres valides se trouvent dans TSref. 

Operateurs 

Les operateurs sont introduits un peu plustard. Par exemple, un deeeux-ci est I'operateur 
d'assignation « = ». 

Chemin et chemin d'objet 

On fait reference aux objets et aux proprietes par leur chemin. Le chemin est constitue 
des objets et proprietes deja definis, separes par un point. 
page.10 est le chemin d'objet menant a I'objet correspondant ; 
page.10.value est le chemin menant a la propriete value de cet objet. 

5.2.10 La syntaxe 

Pour simplifier, la notation se resume a I'expression suivante : 

[Chemin d'objet] . [Propriete] [Operateur] [Valeur] 

Les regies syntaxiques suivantes s'appliquent a TypoScript : 

■ Les objets et les proprietes sont separes par un point qui traduit en meme temps la depen- 
dance hierarchique. 

■ TypoScript est sensible a la casse. 

■ Les constantes ont la forme {$nom} et sont remplacees par une valeur avant que le 
contenu du champ Setup de TypoScript soit traite. 

■ Pour les noms d'objets et leurs proprietes, seuls les caracteres A-Z, a-z, 0-9 ainsi que les 
caracteres « - » et « _ » sont utilises. 

■ Le texte compris entre le debut de la ligne et I'operateur forme le chemin menant a I'objet 
ou a la propriete. II ne peut pas contenir d'espace. 

■ L'ordre de traitement des proprietes d'objets est defini par I'objet lui-meme ; il n'est done 
pas defini par l'ordre des lignes du setup TypoScript. 

■ Les listes numeriques (page.10, page.20) sont traitees par ordre croissant. 
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Constantes 

Les regies syntaxiques du setup s'appliquent aussi aux constantes, avee les restrictions suiv- 
antes : 

■ Les constantes ne sont pas des objets et n'ont done pas de proprietes ; des lors, au- 
cune fonction du type stdWrap ou if n'est disponible. Elles sont neanmoins organisees 
hierarchiquement. 

■ L'operateur de referencement =< n'est pas disponible. 

■ Pour les valeurs s'etendant sur plusieurs lignes, vous ne pouvez utiliser l'operateur (), comme 
dans le setup. 

Valeurs 

Pour les valeurs, les regies suivantes sont d'application : 

■ Elles ne sont pas entourees de guillemets. 

■ Elles debutent apres l'operateur et se terminent a la fin de la ligne. 

■ Si elles s'etendent sur plusieurs lignes, elles peuvent etre groupees a I'aide de l'operateur (). 

■ Les espaces preeedant et suivant les valeurs sont supprimes lorsque celles-ci sont assignees. 



Commentaires et blocs de commentaires 

Vous pouvez ajouter des commentaires a un document TypoScript. Si vous n'etes pas trap 
familiarise avec les techniques de programmation, nous vous recommandons d'inclure a vos 
projets suffisamment de commentaires pour pouvoir vous retrouver facilement dans votre 
code, meme apres un long intervalle de temps. 

Les commentaires d'une ligne sont marques d'un / ou d'un # et precedent les elements de 
contenu. 

# Default PAGE object: 
/ un autre commentaire 

Les blocs de commentaires de plusieurs lignes commencent par /* et se terminent par */, place 
au debut de la derniere ligne de commentaire. Le signe terminant un commentaire est impor- 
tant puisque sans lui, le code suivant le commentaire sera traite lui aussi comme un commen- 
taire. 

/* 

Inserez ici un commentaire 
s'etendant sur plusieurs lignes. 
*/ 
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Operateurs 
{} 

Les operateurs { } vous aident a ecrire du TypoScript plus clairement et de maniere plus 
compacte en vous permettant d'emboiter plusieurs proprietes. 

L'exemple suivant produit exactement le meme resultat que le precedent. 

page = PAGE 
page { 

typeNum = 0 

10 = TEXT 

10 { 

value = HELLO WORLD! 

} 

} 

Cet emboitement commence par une accolade ({). Tous les autres details suivant cet 
operateur sur la meme ligne sont ignores lors de I'analyse syntaxique. La premiere 
propriete subordonnee se trouve a la ligne suivante. L'espacement en debut de ligne 
ameliore la lisibilite. L'emboTtement de proprietes se termine par I'operateur } qui doit 
etre le premier caractere de la ligne, espaces vides non compris. 

0 

Les parentheses () renferment des valeurs qui peuvent prendre plusieurs lignes de code. 
Ceci peut s'averer utile si vous reprenez du texte qui est deja structure ou si vous voulez 
indiquer des valeurs plus clairement, par souci de lisibilite. 

L'exemple a ete legerement modifie ci-dessous afin d'illustrer cet usage. L'objet 10 y est 
defini comme un objet de contenu HTML. Du code HTML, cree par exemple dans un 
editeur HTML, est assigne a la propriete page.10.value. 

page { 

typeNum = 0 
10 = HTML 
10. value ( 

<table widths " 100% " border="0" cellspacing="0" cellpadding= " 0 " > 
<tr> 

<td width="25%" align="left" bgcolor^ " #0033 66 " > 

<span style- "color : #FFFFFF " >Peti t exemple : </spanx/td> 

<td width="75%" align="center" bgcolor= " #84A1E5 " > 

<span style="color : #FFFFFF">Insertion d'une valeur sur plusieurs 
lignes< / spanx / td> 

</tr> 
</table> 

) 

} 

Est alors affiche dans le frontend : 



Figure 5.22: 
L'operateur () 
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Le signe egal, =, sert a I'assignation. Pour definir un objet, on I'assigne a un type d'objet. 
Une valeur est assignee a une propriete.Toute la chaine de caracteressuivant I'operateur 
(et sur la meme ligne de code que lui) est trait.ee comme une valeur. Les espaces vides 
precedant et suivant I'operateur sont supprimes. 

page. 10 .value = HELLO WORLD! 

# est identique a 

page .10. value-HELLO WORLD ! 



< (Copier) 

Grace a I'operateur <, vous pouvez copier un chemin dans un autre. Des proprietes et 
des objets entiers peuvent etre copies. Lorsque vous utilisez cet operateur, les proprietes 
et les valeurs de I'objet sont copiees. Les objets, valeurs et proprietes qui existent deja 
dans le chemin dans lequel vous les copiez sont remplaces. 

Nous assignons ci-apres deux nouveaux objets a I'exemple « HELLO WORLD ! ». L'objet 
page. 15 est defini comme un objet de contenu HTML, et un « saut a la ligne » est 
assigne a la valeur de sortie. L'objet page.10 est copie dans page.20. A I'interieur des 
accolades, vous accedez aussi au chemin d'objet en utilisant la syntaxe 20 < .10. 

page = PAGE 
page { 

typeNum = 0 

10 = TEXT 

10. value = HELLO World 

15 = HTML 

15. value = <br /> 

20 < page.10 

# ou alternativement : 

# 20 < .10 
} 



Puisque le meme objet TEXT se retrouve dans page.10 et page.20, le texte est affiche 
deux fois : 

Figure 5.23: 

HELLO World Copie d'un chemin 

HELLO World d'objet par 

I'operateur < 

Les objets et leur hierarchie sont illustres et controles graphiquement dans le TypoS- 
cript Object Browser (Web — > Gabarit — ► TypoScript Object Browser — ► [nom du 
gabarit]). 
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Figure 5.24: 
TypoScript Object 
Browser : les 
proprietes de I'objet 
10 sont copiees dans 
I'objet 20 



g] H (j< B2C-Accueil 
Chemin: / r B2C-AccueiV 



I Typo Script Object Browser I V 



CURRENT TEMPLATE: 

>2 r.aha rit Jwj rt - (B2C) 



Browse: Setup V OL: ALL 



g}...[configl 
|j..[page]=PAGE 

: u do; II XI 

L..[ va lue]-IICLLD World 

fi].[is]=HiriL 
i i_[»alua]=<br/> 
4 [20]=TEXT 

i— [value]-IICLLO World 

'--£tvpersum]=u 

-..[resources]= 

_.lsrIetTtl»] = R?r 



=< (Referencement) 

Conjointementavec I'operateur =, < necopie pas le chemin d'objet maisy fait reference. 
Le referencement est possible uniquement avec les objets, pas avec les proprietes. Notez 
que ce cas-ci mis a part, il est impossible de combiner deux operateurs en TypoScript. 

L'exemple suivant illustre les differences de fonctionnement de la copie et du referen- 
cement : 

# L'objet objetXY 
objetXY = TEXT 
objetXY { 

value = Hello TYPOS?? 
textStyle . color . default = red 

} 

page = PAGE 
page { 

typeNum = 0 

# L'objet 10 fait reference a l'objet objetXY. 
10 = < objetXY 

10. value = Hello TYPOS!! (reference) 

15 = HTML 

15. value = <br /> 

# L'objet objetXY est copie. 
20 < objetXY 

20. value = Hello TYPOS!! (copie) 

} 

# Une propriete de l'objet objectXY est changee plus tard 
objetXY. textStyle . color . default = blue 

Dans le frontend, le texte de la copie est indique en rouge tandis que celui de la reference 
est indique en bleu (mais puisque Illustration est en noir et blanc ci-dessous, vous devez 
nous croire sur parole...) : 
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Hello TYPOS!! (reference) 
Hello TYPOS!! (copie) 

Avec I'operateur =<, I'objet page. 10 pointe vers I'objet objetXY precedemment defini. 
Puisque I'objet page.10 est une reference, le contenu de I'objet objetXY est repris a 
chaque fois que le TypoSeript rencontre I'objet page.10 dans son traitement. De cette 
maniere, I'objet peut etre utilise plusieurs fois et a differents endroits de I'arborescence 
des objets, tout en etant toujours a jour puisque les changements dans I'objet reference 
sont pris en compte dans toutes les references. 

Dans le TypoSeript Object Browser, vous pouvez verifier comment le setup TypoSeript a 
ete assemble. Le texte « Hello Typos ! ! (reference) » sera imprime en bleu dans le fron- 
tend puisque la propriete textStyle.color.default de I'objet objetXY a ete remplacee. II 
est interessant de remarquer que les proprietes de la reference peuvent etre remplacees 
loealement, ici en modifiant page.10.value. La copie dans le chemin d'objet page. 20 ne 
tient pas compte du changement dans la couleur du texte. En effet, les proprietes et 
valeurs de I'objet objetXY sont copiees lorsque le code TypoSeript correspondant est lu, 
ce qui se produit avant que la couleur du texte ait ete changee en bleu. C'est pourquoi 
le texte « Hello TYPOS ! ! (copie) » apparait en rouge. 



Figure 5.25: 
Comparaison entre 
referencement et 
copie 



SETUP ROOT 



S-tconfig] 
[|...[objetXY]=TEXT 



Q ..[pa. 3 e] = PAGE 

|g--[10]=< objetXY ' 



['.' alue] = Hello TYPOS?? 

Q .[textStyle] 
£] .[color] 

I [default]=blue 



.. [ualue]=Hello TYPOSM (reference) 

|±]...[15]=HTML 

1 [value]=<br /> 

r|...[20]=TEXT 

i.....[ualue]=Hello TYPOSM (copie) 
0 ...[textStyle] 
(=1 [color] 

i [default]=red 

'typeNuml = 0 



Figure 5.26: 
TypoSeript Object 
Browser : I'objet 10 
fait reference a I'objet 
objetXY 



L'operateur > efface les objets et proprietes qui se trouvaient jusque-la dans le chemin 
donne. 

Dans I'exemple suivant, I'objet page.20 est supprime. 

page = PAGE 
page { 

typeNum = 0 

10 = TEXT 
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10. value = HELLO World 

15 = HTML 

15. value = <br /> 

20 = TEXT 

20. value = Hello TYPOS!! 
20 > 

} 

Par consequent, seule la premiere ligne de texte est affichee. 

Figure 5.27: 

« Hdio typos 1 1 » HELLO World 

est supprime 

Conditions 

Reference 270225 Les conditions dans TypoScript s'ecrivent sur une seule ligne, sont entourees par des crochets 
([]) et ne peuvent etre placees a I'interieur d'un emboTtement de proprietes (realise a I'aide 
d'accolades, { }). Pour que le code qui suit la condition soit lu, la condition doit etre verifiee. 
Ceci permet par exemple de restreindre les instructions a certains navigateurs ou groupes 
d'utilisateurs specifiques. 

Si I'analyseur syntaxique remarque que la condition est verifiee, il continue d'interpreter le 
code TypoScript. Sinon, il ignorera le code jusqu'au marqueur de fin de condition. 

Nous traitons les conditions en detail a la section 5.1 1. Nous nous interessons ici uniquement 
a la syntaxe. Dans I'exemple suivant, la condition [browser = netscape] signifie que I'objet 
page. 10 est defini uniquement si le navigateur du visiteur du site est reconnu par TYP03 
comme etant un navigateur de type Netscape. La commande [END] (ou encore : [GLOBAL]) 
indique la fin de la condition. 

page = PAGE 
page . typeNum = 0 

[browser = netscape] 

page { 

10 = TEXT 

10. value = HELLO World 
10. wrap = | <br /> 

} 

[END] 

page { 

2 0 = TEXT 

20. value = Hello TYPOS!! 

} 

Lorsque plusieurs conditions se trouventsur la meme ligne, ellessont considerees comme etant 
separees par I'operateur logique OR, c'est-a-dire que tant qu'au moins une des conditions 
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est remplie, le code TypoSeript suivant la condition sera lu. L'operateur AND n'est pas encore 
supporte dans les conditions TypoSeript. 

Dans I'exemple qui suit, I'objet page.20 affiche un texte different si la requete provient d'un 
navigateur Netscape ou si le systeme d'exploitation est Linux. 

[browser = netscape] [system = linux] 

page . 20 .value = vous etes un utilisateur Netscape ou Linux 
[END] 

La condition [ELSE] est considered comme etant verifiee si la condition la precedant ne Test 
pas. Cette condition se termine egalement par [END] ou [GLOBAL]. 

page = PAGE 
page . typeNum = 0 
[browser = netscape] 

page { 

10 = TEXT 

10. value = resultat pour le navigateur Netscape 

} 

[ELSE] 

page { 

2 0 = TEXT 

2 0. value = resultat pour tous les autres navigateurs 

} 

[END] 

page { 

3 0 = TEXT 

3 0. value = resultat pour tous les navigateurs 
3 0 . wrap = <br / > | 

} 

Par exemple, le navigateur Firefox est identifie comme un browser Netscape et produit done le 
resultat suivant : 

resultat pour le navigateur Netscape 
resultat pour tous les navigateurs 

Notez que vous ne pouvez pas emboTter des conditions. Ainsi, I'exemple suivant ne fonctionne 
pas. 

[browser = netscape] 

page . 2 0 . value = vous etes un utilisateur Netscape 
[system = linux] 

page . 20 . value = vous etes un utilisateur Linux et Netscape 
[END] 
[END] 

Inclusions 

Vous pouvez inclure des bibliotheques TypoSeript a partir de fichiers texte externes. L'instruc- 
tion permettant ceci doit s'ecrire sur une seule ligne mais peut, a I'inverse des conditions, se 



Figure 5.28: 

La condition [browser 

= netscape] est 

verifiee 
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trouver dans un emboTtement de proprietes. L'insertion et le traitement de la bibliotheque se 
font avant I'analyse syntaxique. 

L'exemple ci-apres vous montre comment integrer un fichier externe a I'aide de instruction 
<INCLUDE_TYPOSCRIPT>. 

page = PAGE 
page . typeNum = 0 
page { 

10 = TEXT 

10. value = resultat 1 
10. wrap = | <br /> 

<INCLUDE_TYPOSCRIPT : sources" FILE : f ileadmin/ typoscript / include_l . txt " > 

30 = TEXT 

30. value = resultat 3 

} 

Le fichier externe include_1.txt, ayant ete enregistre dans le systeme de fichiers sous filead- 
min/typoscript/, contient le code suivant : 

2 0 = TEXT 

20. value = resultat 2 (integre via INCLUDE) 
20. wrap = | <br /> 

Le resultat suivant est affiche dans le frontend : 
Figure 5.29: resultat 1 



Insertion de code 
TypoScript par fichier 



resultat 2 (integre via INCLUDE) 
resultat 3 



5.2.11 Ordre de traitement 

Pour utiliser TypoScript, vous devez comprendre Lord re dans lequel le code TypoScript est traite. 

1. Les instructions TypoScript dans le champ des constantessont luesde haut en bas et les 
conditions sont prises en compte. 

2. Les constantes sont remplacees dans le setup TypoScript dans I'ordre dans lequel dies 
ont ete definies. 

3. Les instructions TypoScript dans le champ setup sont lues de haut en bas. 

4. Les conditions sont evaluees lorsqu'elles sont lues. 

5. Les copies d'objets et de proprietes utilisant I'operateur < se font lors de I'analyse syn- 
taxique. Ceci signifie bien entendu que seule la configuration de I'objet disponible au 
moment de la copie sera copiee. Si des changements sont apportes a I'objet dans les 
lignes qui suivent, ils ne seront pas appliques a la copie deja creee. 

6. Le code TypoScript est traite et les references sont integrees. 
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Comme vous le voyez, la sequence des instructions durant I'analyse syntaxique de TypoScript 
est importante puisque la surcharge des proprietes dans les copies et les objets de sortie n'a 
pas d'effet sur les objets a partir desquels ils ont ete copies. D'autre part, I'ordre de traitement 
n'a pas d'importance. 

■ Les proprietes ne sont pas traitees dans I'ordre dans lequel elles sont creees dans le gabarit. 
C'est I'objet lui-meme qui definit quand il evaluera une propriete. 

■ Les objets sont traites dans I'ordre de la liste numerique dans laquelle ils sont definis. 

Ainsi, les exemples suivants donnent le meme resultat ; il est evident que la premiere version 
est bien plus claire. 

Exemple 1 : 

page = PAGE 

page . typeNum = 0 

page. 10 = TEXT 

page . 10 .value = Je suis un 

page. 15 = HTML 

page . 15 . value = <br /> 

page. 2 0 = TEXT 

page . 20 .value = texte exemple! 

Exemple 2 : 

page = PAGE 

page . typeNum = 0 

page. 143 = HTML 

page . 143 .value = <br /> 

page. 377 = TEXT 

page . 377 .value = texte exemple! 

page. 23 = TEXT 

page . 23 .value = Je suis un 



5.2.12 UemboTtement d 'objets 

Un autre principe essentiel du TypoScript est I'emboTtement d'objets. Jusqu'a present, vous 
avez vu comment les objets creaient du contenu et I'affichaient dans I'ordre specifie par une 
liste numerique. Le code de setup suivant en donne une illustration : 

page = PAGE 

page . typeNum = 0 

page. 10 = TEXT 

page . 10 .value = je suis un 

page. 10. wrap = | <br /> 



Je suis un 
texte exemple! 



Figure 5.30: 
Affichage des 
exemples dans le 
frontend 
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page. 2 0 = TEXT 
page . 20 . value = petit 
page. 2 0. wrap = | <br /> 
page .30 = TEXT 

page . 30 .value = texte exemple! 

Ce code produit la sortie : 

je suis un 
petit 

texte exemple! 

L'hypothese generale est que ehaque objet a son tour se vide de son contenu de sorte que le 
resultats'accumule graduellement dans le frontend. En fait, ce n'est pas tout a fait correct : les 
objets restituent leur contenu ou leur donnees dans I'objet qui les integre. Dans I'exemple ci- 
dessus, les objets HTML transferent leurs elements de contenu a I'objet PAGE situe a un niveau 
superieur. Les elements de contenu crees sont retournes, puis affiches, uniquement apres que 
tous les objets de page ont ete traites. 

Cet emboitement peut s'etendre sur plusieurs niveaux, etant donne que beaucoup de types 
d'objets peuvent eux-meme integrer des objets. Le code setup suivant donne le meme resultat 
que I'exemple precedent : 

page = PAGE 
page . typeNum = 0 
page. 10 = COA 
page. 10 { 
10 = COA 
10 { 

10 = COA 
10 { 

10 = TEXT 

10. value = je suis un 
1 0 . wrap = | <br / > 

} 

2 0 = TEXT 

2 0. value = petit 

2 0 . wrap = | <br / > 

} 

2 0 = TEXT 

2 0. value = texte exemple! 

} 

Le meme code n'utilisant pas d'accolades ressemble a ceci : 

page = PAGE 
page . typeNum = 0 

page. 10 = COA 
page. 10. 10 = COA 
page. 10 . 10 . 10 = COA 



page. 10 . 10 . 10 . 10 = TEXT 



5.3 Objets, fonctions et types de donnees TS 



page. 10 . 10 . 10 . 10 .value = je suis un 
page. 10 . 10 . 10 . 10 .wrap = | <br /> 

page. 10 . 10 . 20 = TEXT 

page . 10 . 10 . 2 0 . value = petit 

page. 10. 10. 20. wrap = | <br /> 

page. 10. 20 = TEXT 

page . 10 . 20 .value = texte exemple! 

Pour comprendre ce setup TypoScript, il faut savoir que le type d'objets COA, de meme que 
le type d'objets PAGE peut integrer des objets dans une liste numerique. La procedure est la 
suivante : un objet COA est appele par page. 10 ; a son tour, cet objet (via page. 10. 10) appelle 
un objet COA, et ainsi de suite. Par apres, un premier objet de contenu (TEXT) est appele par 
page.10.10.10.10, qui cree en realite une sortie, a savoir « je suis un ». Tous les objets dans 
COA page. 10. 10. 10 ont maintenant ete traites. L'objet COA a recu le contenu genere a partir 
de l'objet TEXT incorpore et le passe a present a son parent COA page.10.10. Ceci a pour effet 
de traiter sa liste d'objets en appelant l'objet TEXT sui van t : page.10.10.20. Le contenu genere 
est annexe au contenu que le COA a recu de I'enfant COA et, apres que la liste d'objet a ete 
traitee, l'objet PAGE recoit les elements de contenu, et ils sont affiches. 
Cet emboTtement est illustre en ajoutant le code suivant : 

page . 10 . 10 . stdWrap . case = upper 

Ce qui a pour effet d'afficher la sortie : 

JE SUIS UN 
PETIT 

texte exemple! 

L'objet COA page.10.10 recoit, avec .stdWrap.case=upper, I'instruction de convertir son con- 
tenu en majuscules. L'objet lui-meme ne cree pas de contenu mais, dans une hierarchie em- 
boitee, incorpore le contenu des deux objets TEXT pour le convertir en majuscules. 

Done, des arborescences d'objets sont creees en TypoScript, oil d'une part les niveaux sont 
traites tour a tour, et oil, d'autre part, I'ordre de traitement depend simultanement de la 
hierarchie. De cette maniere vous disposez d'un puissant outil pour configurer la restitution 
du contenu dans le frontend. 

5.3 Objets, fonctions et types de donnees TS 
5.3.1 Types de donnees 

Les types de donnees utilises par TYP03 sont tres varies et ne sont pas comparables aux types Reference 253434 
de donnees des langages de programmation. Bien qu'il y ait egalement des types de donnees 
comme int, string et boolean, TypoScript utilise aussi degree et pixels. Comme int, ce sont 
egalement des valeurs entieres, a ceci pres que degree definit un nombre de degres et pix- 
els un nombre de pixels. Comme vous le voyez, les types de donnees nous aident a decrire 
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quelles sortes de donnees sont assignees a une propriete. Parfois, le type de donnees clarifie la 
fonctionnalite de la propriete. La liste complete des types de donnees se trouve a la reference 
ci-contre. 

Un element caracteristique des types de donnees reside dans le fait que certains d'entre eux 
sont en fait des fonctions. Jusqu'a present nous vous avons indique de quelle maniere Ty- 
poScript fixe les parametres de configuration. II utilise une procedure purement statique, sauf 
pour les conditions. Mais avec les fonctions disponibles, TypoScript devient un outil dynamique 
et peut traiter et modifier des donnees. 

Voici un exemple tres simple : 



page. 10 = HTML 

page . 10 . value = kasper 

page . 10 . value . case = upper 



value est dans I'objet HTML et son type de donnees est stdWrap. Cette fonction connaTt la 
propriete case et peut done etre configured avec la valeur upper pour convertir la valeur en 
majuscules. 

TypoScript fournit toute une serie de fonctions similaires qui sont decrites plus en detail dans 
la suite. Ces fonctions combinees avec des types d'objets transforment TypoScript en un outil 
puissant. 

Les types de donnees sont repris dans les tables des proprietes d'objets dans le document TSref. 
Dans une assignation, vous trouvez non seulement des types de donnees maisaussi des valeurs 
telles que ->select ou ->filelink. 

Reference 924038 Dans ces cas-la, les fonctions sont appelees via les proprietes du meme nom ou alors des objets 
predefinis du type precise sont disponibles (par exemple TLO 4 config). A la figure suivante, 
voyez comment les proprietes if et stdWrap pointent vers les fonctions correspondantes. 



Figure 5.31: 
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Reference 034017 Si nous ajoutons +calc a la valeur d'un type de donnees dansTSref, vous pouvez alors appliquer 
des fonctions mathematiques sur cette valeur. Les operateurs +-/* utilises dans ces calculs ne 
connaissent pas de priorites et sont traites dans I'ordre dans lequel ils apparaissent. 

Reference 695668 Comme vous le voyez a la figure 5.31, la propriete est du type de donnees string/stdWrap. 

Pour des types de donnees joints comme ceux-ci, soit vous specifiez une valeur (string), soit 
vous utilisez la fonction precisee (stdWrap). Vous pouvez egalement combiner les deux. 



4 Toplevd Object 
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5.3.2 Le concept d'enveloppe 

Le concept d'enveloppe (wrap) est tres important pour de nombreux objets TypoScript. II est 
represents par une chaTne de caracteres divisee par un caractere (tube) « - ». Si I'objet a la 
propriete d'une enveloppe, il est entoure par la valeur de I'enveloppe. 

Dans notre exemple, I'objet page.10 de type TEXT avec la valeur Hello World est entoure par 
I'enveloppe <strong>|</strong> : 

page. 10 = TEXT 

page. 10 .value = HELLO WORLD! 

page. 10. wrap = <strong> | </strong> 

Le resultat est alors du texte en gras : <strong>HELL0 WORLDk/strong>. 

Les espaces, les tabulations et les sauts a la ligne avant et apres les differentes parties de 
I'enveloppe sont supprimes lorsqu'ils sont lus. 

5.3.3 Fonctions 

Comme nous I'avons deja deerit, certains types de donnees ont des capacit.es speciales. lis sont Reference 991290 

utilises par de nombreux objets de contenu et leur fournissent des fonctionnalites univer- 

selles. lis sont implementes en PHP en utilisant des fonctions independantes, c'est pourquoi ils 

sont egalement repris comme fonctions dans TSref. Ils concordent toutefois parfaitement avec 

d'autres types de donnees en TypoScript pour s'inserer dans la syntaxe des objets et proprietes. 

Mais ils sont utilises uniquement si les proprietes sont du type de donnees correspondant, 

puisqu'ils sont appeles explicitement au niveau du code PHP. Vous trouverez dans TSref le type 

de donnees de chaque propriete. 

Gardez a I'esprit que les fonctions ne sont pas disponibles dans le champ des constantes. 
stdWrap 

Cette fonction joue un role tres important dansTYP03. Selon I'usage que vous en faites, 
e I le peut importer, controler ou manipuler des donnees. Une bonne partie des fonctions 
ci-apres sont utilisees a partir de stdWrap. Done, lorsque stdWrap est le type de donnees 
d'une propriete, des outils puissants sont a votre disposition pour le traitement des 
elements de contenu. 

img Resource 

Cette fonction definit la source d'un fichier image, soumet I'image a un simple trai- 
tement et cree le code HTML requis pour la sortie. El le est disponible aux proprietes 
appartenant au type de fichiers du meme nom (imgResource). 

imageLinkWrap 

Cette fonction permet d'editer une image a I'aide des elements avances de la bi- 
bliotheque graphique (GIFBUILDER). Vous pouvez en outre etablir un simple lien (ty- 
polink) ou un lien avec le script showpic.php, pour ouvrir I'image dans une fenetre 
JavaScript separee. 

numRows 

Permet de determiner le nombre d'enregistrements dans une table ou dans une requete 
de type Select. 
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select 

Vous permet de formuler une requete SQL qui sera affiehee par le cObject CONTENT. 
Les enregistrements caches ou supprimes ne sont pas pris en compte dans ce processus, 
de meme que ceux dont la visibility est restreinte par Lancement/arret ou a des groupes 
d'utilisateurs frontend. 

split 

Cette fonction divise le contenu d'un texte sur base d'une lettre ou d'un caractere precis 
et traite les sections resultantes avec d'autres fonctions ou objets de contenu. Elle peut 
par exemple etre utile si vous voulez qu'un menu utilise plusieurs couleurs. 

if 

La fonction if imite la structure de controle classique IF. Si les conditions subordonnees 
sont toutes remplies, les elements de contenu de I'objet enfant restent telles quelles. 
Sinon, la fonction retourne FALSE et les elements de contenu de I'objet sont supprimes. 

typolink 

typolink transforme le contenu en un lien. Cette fonction doit etre utilisee autant 
que possible a la place des liens configures "en clur", entre autres pour supporter la 
simulation des pages HTML statiques. 

texts tyle 

La fonction textStyle quelque peu vieillissante definit I'apparence des zones de texte 
lorsque vous utilisez FONT ou d'autres elements d'HTML. L'alternative moderne serait 
d'utiliser les definitions CSS. 

encapsLines 

Permet d'inserer des paragraphes, par exemple dans des balises HTML, pour la sortie. Des 
balises telles que P ou DIV sont ajoutees a I'analyse syntaxique et ne sont pas sauvees 
dans la base de donnees avec le contenu, ce qui fait que ce dernier reste « propre ». 

tableStyle 

Vous entourez le contenu d'une balise TABLE grace a tableStyle. Differents details sont 
definis ici. La fonction est utile, entre autres, en prevision de la table de mise en page, 
surtout pour configurer des gabarits TypoScript tres soignes. 

addParams 

En utilisant cette fonction, vous passez des attributs (parametres) supplementaires aux 
elements HTML de cObjects existants. 

filelink 

Un nom de fichier est converti en un lien de telechargement grace a filelink. Les details 
du chemin, des attributs tels un texte ou un titre alternatif et des icones sont ajoutes. 
Des aspects avances de cette fonction comptent le nombre de telechargements ou le 
camouflage du chemin d'acces au fichier sur le disque pour des raisons de securite. 

parseFunc 

Un post-traitement etendu des elements de contenu est rendu possible par cette fonc- 
tion. Vous pouvez par exemple remplacer les marqueurs inseres dans le texte, definir des 
regies d'utilisation ou de remplacement d'elements HTML, ou encore demarrer un trai- 
tement recursif de blocs HTML emboites, tout en introduisant des fonctions supplemen- 
taires. Vous pouvez ainsi envelopper les elements de contenu ou des termes de recherche 



5.3 Objets, fonctions et types de donnees TS 



de maniere a ce qu'ils soient identifies plus faeilement, determiner la maniere avec la- 
quelle les liens ou les listes (ordonnees ou non-ordonnees) sont generes, ou quelles 
balises peuvent apparaitre dans les elements de contenu. 
makelinks 

makelinks genere des liens HTML complets a partir de simples adresses Web ou email 
qui apparaissent dans le eontenu. 

tags 

Utilisez eette fonction pour definir vos propres balises. El les sont sauvegardees dans 
la base de donnees et sont remplacees a la sortie par differents elements HTML qui 
existent reellement. Cette fonction est utilisee de pair avec parseFunc. Un exemple de 
balise definie par un utilisateur de TYP03 est I'element <LINK> qui est remplace lors de 
I'analyse syntaxique par un lien HTML propre. 

HTMLparser 

La fonction HTMLparser separe I'entree HTML complete en de simples elements HTML 
et leurs attributs. Ce faisant, les regies definies sont appliquees a la combinaison des 
elements et des attributs. La fonction est surtout utile pour manipuler du contenu HTML 
importe ou exterieur, et lorsque vous travaillez avec le Rich Text Editor. 

HTMLparser_tags 

HTMLparser_tags est appelee par la fonction HTMLparser mentionnee ci-dessus. El le 
definit des regies precises pour les attributs de chaque element HTML. 

5.3.4 Objets de contenu (cObjects) 

TypoScript consiste principalement en des Objets de Contenu ou cObjects : ils restituent Reference 207606 

du contenu a partir de donnees en utilisant une configuration TypoScript. Bien que d'autres 

methodes d'entree et de sortie de donnees soient possibles, les objets de contenu sont gene- 

ralement utilises pour transformer en sortie frontend les donnees dont les types de contenu 

sont disponibles dans le backend (Text, Image, Insert plugin, ...) et sauves dans la base de 

donnees. 

Un tableau accessible de donnees courantes est assigne a chaque cObject lorsqu'il est traite. 
II s'agit generalement des donnees de I'enregistrement actuel. Si un type de contenu Text 
w/image est restitue, les donnees entrees (par exemple I'en-tete sur les noms des fichiers des 
images inserees) sont disponibles pour la configuration TypoScript qui affiche cet element de 
contenu parce que les champs de I'enregistrement sont accessibles (cf. section 5.1 1.3). 

Dans les exemples precedemment exposes, nous avons uniquement utilise les cObjects TEXT, 
HTML et HRULER. Mais il existe beaucoup d'autres cObjects en TYP03. 

Exemple : cObject FILE 

Le cObject FILE integre des elements de contenu du systeme de fichiers ayant une taille allant Reference 036048 
jusqu'a 1024 kB. Notez que les images de type JPG, GIF, JPEG et PNG sont affichees avec une 
balise <img>. Tous les autres formats sont lus et leur contenu est affiche sans traitement. 

Dans I'exemple qui suit, page.10 est defini comme un cObject FILE. La propriete file (type 
de donnee : resource) pointe vers une image en format GIF. L'objet page.20 est aussi defini 
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comme un cObject FILE mais pointe vers un fichier en format TXT. Le resultat est que ce fiehier 
est lu et son contenu affiche. 

page = PAGE 
page { 

typeNum = 0 

10 = FILE 

10. file = f ileadmin/images/layout/logo.gif 
20 = FILE 

20. file = f ileadmin/documents/textl . txt 

} 



Figure 5.32: 
Aeeeder au systeme 
de fichiers avee le 
cObject FILE (sortie 

frontend) LM Liber I Gallia est omnis divisa in partes 

tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum 
lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institute, 
legibus inter se differunt. Gallos ab Aquitams Garumna flumen, a Belgis 




Vue d'ensemble des cObjects 
HTML 

HTML est utilise pour afficher du contenu HTML. La propriete value est du type de 
donnees stdWrap avec lequel les proprietes de la fonction du meme nom sont dispo- 
nibles. 
Exemple : 

10 = HTML 

10. value = Ceci est un objet HTML 
10 .value . case = upper 

TEXT 

TEXT est tres similaire au cObject HTML et est utilise pour afficher du texte qui n'est pas 
mis en forme. Les proprietes de la fonction stdWrap sont appelees a partir de la base de 
I'objet, ce qui n'est toutefois pas la regie generale. 
Exemple : 

10 = TEXT 

10. value = Ceci est un objet de texte 
10. case = lower 

COBJ_ARRAY (COA, COAJNT) 

Le cObject COBJ_ARRAY (alternativement : COA) comprend plusieurs objets dans une 
liste numerique, dans un seul tableau. Si vous creez un objet du type COAJNT, il se 
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comportera exactement comme I'objet USERJNT : il est restitue sans passer par le 
cache ! 
Exemple : 

temp. monOb jet = COA 
temp. monOb jet { 
10 = HTML 

10. value = <table border=l cellspacing=5 bgcolor=greyxtrxtd> 
20 = TEXT 

20. value = Un objet, cree via COA. 
3 0 = HTML 

30. value = <tdxtrx/table> 

} 

FILE 

Avec le cObject FILE, vous accedez au systeme de fichiers et integrez du texte, des images 
ou des fichiers HTML par exemple. 
Exemple : 

10 = FILE 

10. file = f ileadmin/html/html-contenul .htm 

IMAGE 

Les images peuvent etre integrees avec le cObject IMAGE. La propriete file du type de 
donnees imgResource permet d'acceder au systeme de fichiers ou aux ressources de 
I'enregistrement de gabarit. 
Exemple : 

10 = IMAGE 

10. file = entete_commercant* . gif 
20 = IMAGE 

20. file = f ileadmin/images/layout/entete_produit . gif 

IMG_RESOURCE 

Le cObject IMG_RESOURCE renvoie uniquement la reference a I'image, sans balise 

<img>. 

Exemple : 

10 = IMG_RESOURCE 

10 . file = entete_commercant* . gif 

10 . stdWrap.wrap = <table width="400" border=0 cellspacing=15 
background-" | " xtrxtd>Notre commercant<tdxtrx/table> 

CLEARGIF 

Le cObjet CLEARGIF insere une image GIF transparente qui peut servir pour inserer des 
espaces blancs dans les gabarits. 
Exemple : 

10 = CLEARGIF 
10. height = 15 
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CONTENT 

Avec le cObject CONTENT, vous affichez les elements de contenu de la base de donnees. 
La requete Select est restreinte aux tables com men cant par tt_, tx_, ttx_, fe_ ou user_. 
Pour afficher les enregistrements, vous avez besoin d'un TLO configure de maniere 
adequate avec le nom de la table qui definit la sortie. La table tt_content, par exemple, 
est preconfiguree dans le gabarit standard Content (Default). 
Exemple : le resultat des elements de contenu de la page courante et de la colonne 
« Normal ». 

10 = CONTENT 

10. table = tt_content 

10. select { 

pidlnList = this 

orderBy = sorting 

where = colPos=0 

} 

RECORDS 

Avec le cObject RECORDS, vous pouvez afficher les enregistrements de la base de don- 
nees, ce qui est comparable au type de contenu Insert record. Vous ne pouvez norma- 
lement pas selectionner des enregistrements a partir de pages inaccessibles (caehees, 
restreintes dans le temps ou dont I'acces est protege), en tout cas tant que I'option 
dontCheck Pid n'est pas configuree. 

Exemple : les enregistrements d'adresses avec UID2 et 3 sont affiches. 

10 = RECORDS 
10 { 

source = tt_address_2 , 3 
tables = tt_address 

conf . tt_address = < tt_address . default 

} 

HMENU 

Ce cObject vous permet de generer un menu hiera rchique. La propriete (1/ 2/ 3/...) fait 
reference au niveau du menu dans lequel I'objet sera restitue. 
Exemple : 

10 = HMENU 
10.1 = TMENU 

CTABLE 

Le cObject CTABLE cree une table HTML dont les cellules de contenu sont entourees par 
quatre autres cellules. Le contenu peut etre assigne a chacune de ces cellules. 
Exemple : 

10 = CTABLE 
10 { 

tableParams = border=0 width=500 
c.10 = CONTENT 
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rm.10 = HMENU 

} 

OTABLE 

Cette table HTML est utilisee pour ajouter un deealage aux elements de contenu. Con- 
cretement, ils sont decales a partir du coin superieur gauche. 
Exemple : 

10 = OTABLE 
10 { 

offset = 10,70 

tableParams = border-0 width-100 
10 = TEXT 

10. value = Contenu 

} 

COLUMNS 

Avec ce cObject, vous creez une table pour laquelle vous specifiez le nombre de colonnes 
et de lignes, les parametres, la largeur, I'espacement des colonnes et I'epaisseur des 
bordures. 
Exemple : 

10 = COLUMNS 
10 { 

1 = CONTENT 

2 = CONTENT 

gapWidth =30 

gapLineThickness = 1 

if . isTrue . numRows < .1 

if . isTrue . if Empty . numRows < .2 

totalWidth = 500 

} 

HRULER 

Ce cObject assez simple trace une ligne horizontale pour laquelle vous specifiez I'epais- 
seur et la couleur, ainsi que I'espacement a gauche et a droite. 
Exemple : 

10 = HRULER 
10 { 

lineThickness = 1 
spaceLeft = 2 0 

} 

IMGTEXT 

Le cObject IMGTEXT aide a agencer les images et le texte. II est utilise d'habitude pour 
generer I'element de contenu Text w/lmage. 

Les images sont placees dans un tableau place avant ou apres le texte et a sa gauche ou 
a sa droite. 
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Exemple : le objet IMGTEXT de styles.content (default) est completement remplace. 

temp. imagetext = IMGTEXT 
temp . imagetext { 

text < tt_content . text . 2 0 

imgList . field = image 

textPos . field = imageorient 

imgPath = uploads/pics/ 

imgOb j Num = 1 

1 . file . import . current = 1 

maxW = 150 

border = 1 

textMargin = 10 

} 

tt_content . textpic .20 > 

tt_content . textpic .20 < temp . imagetext 

CASE 

CASE permet de faire la distinction entre differents cas, a la maniere de la construction 
switch du PHP. Si la propriete key a le meme nom qu'une autre propriete du tableau de 
I'objet, alors ce dernier est affiehe. 

L'appellation du cObject peut etre choisie librement mais les mots reserves key, default, 
stdWrap et if ne peuvent pas etre utilises. 

Si la propriete key n'est pas definie, alors I'objet default est utilise a sa place. Exemple : 
pour le type de contenu Text, la disposition 2 est affichee avec un en-tete de section 
en minuscules. 

temp. stuff = CASE 
temp . stuff . key. field = CType 
temp . stuff . default < lib. stdheader 
temp. stuff . text < lib . stdheader 
1 ib . s tdheader > 
lib . stdheader < temp. stuff 
lib . stdheader . text { 
10.2. case = lower 

} 

LOAD_REGISTER 

Le registre est une memoire interne temporaire en TYP03. Les variables stockees sont 
globalement disponibles et sont affichees, sauvees ou ecrasees a differents moments de 
I'analyse syntaxique. Avec LOAD_REGISTER, les valeurs sauvees temporairement peuvent 
etre ecrasees par le systeme et remplacees par vos propres definitions, de maniere a in- 
fluencer le processus de generation du contenu. La memoire temporaire est organisee 
en tableau et comprend des proprietes et leurs valeurs. 

Exemple : la date a laquelle a ete realisee la derniere mise a jour de la page est remplace 
par une date fixee. 

10 = LOAD_REGI STER 

1 0 . SYS_LASTCHANGED . data = date: U 



5.3 Objets, fonctions et types de donnees TS 



RESTORE_REGISTER 

Cet objet annule les changements realises par LOAD_REGISTER dans le registre interne 
du systeme interne. Le tableau de registre original est alors restaure. Si les changements 
de registre doivent avoir un effet sur un endroit precis, et doivent ensuite etre a nou- 
veau remplaces par les valeurs du systeme, alors I'utilisation de RESTORE_REGISTER est 
appropriee. 
Exemple : 

20 = RESTORE_REGISTER 

FORM 

L'objet FORM est responsable de la representation des formulaires. II permet de definir 
des formulaires directement en TypoScript (par exemple les formulaires de messagerie 
et d'identification du systeme) et permet aussi a des redacteurs de les definir dans le 
backend du systeme. 
Exemple : formulaire d'identification. 

temp . loginf orm = FORM 
temp . loginf orm { 
dataArray { 

10 . label = Norn d ' utilisateur : 

10. type = *user-input 

20. label = Mot de passe: 

20. type = *pass-password 

30. type = logintype=hidden 

3 0. value = Login 

40. type = submit=submit 

40. value = Identification 

} 

layout = <trxtd>###LABEL###</tdxtd>###FIELD###</tdx/tr> 
stdWrap.wrap = <table> | </table> 
hiddenFields .pid = TEXT 
hiddenFields .pid. value = 123 

} 

SEARCHRESULT 

Le cObject SEARCHRESULT controle et liste le resultat de la recherche TYP03. La re- 
cherche se fait uniquement pour les types de pages Standard, Avance et Hors menu. Le 
cObject determine I'apparence de la liste en plus des valeurs des tables et des champs a 
inclure dans la recherche. Les termes de la recherche sont fournis par un formulaire avec 
des parametres URLspeciaux. Les requetessur la base de donnees se font en arriere-plan 
et la liste des resultats est renvoyee. Les termes de la recherche sont conserves dans le 
registre decrit ci-dessus pour que les termes trouves puissent par exemple etre mis en 
couleurs par d'autres fonctions. 

USER et USERJNT 

Ces objets de contenu sont les instruments recommandes pour Integration de vos 
propres scripts PHP. L'objet appelle une fonction PHP ou une methode d'une classe et 
leur configuration peut etre passee en argument. Presque tous les plugins du frontend 
sont bases sur cet objet. 
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L'objet USERJNT est surtout utilise lorsque sont impliquees des fonctionnalites dyna- 
miques qui ne peuvent ou ne devraient pas etre dans le cache. Par exemple, si I'utilisa- 
teur soumet un formulaire d'inscription a un bulletin d'information, cette donnee, pour 
etre sauvee dans la base de donnees, sera traitee dynamiquement. 
Exemple : 

includeLibs . alt_xml = media/scripts/xmlversionLib. inc 
10 = USER 

lO.userFunc = user_xmlversion->main_xmlversion 

PHP_SCRIPT 

PHP_SCRIPT sert a integrer de simples scripts PHP. Un des desavantages de cet objet 
est que vous devez desactiver completement la fonctionnalite de cache de la page, ce 
qui entraine des delais perceptibles lors de I'appel de la page et une charge accrue sur 
le serveur. 

Pour integrer vos propres scripts, vous devriez autant que possible utiliser USER ou 
USERJNT. Cette option est ignoree si 
$TYP03_CONF_VARS"FE"]["noPHPscriptlnclude"] = 1; 
est active et place dans localconf.php. 

PHP_SCRIPT_INT 

Cette alternative a PHP_SCRIPT ameliore quelque peu les problemes de cache mais 
cause des problemes de debogage et de variables globales. Utilisez plutot USER ou 
USERJNT. 

PHP_SCRIPTJEXT 

Avec cet objet, I'integration des scripts se deroule hors de I'environnement TypoScript. 
Ceci est tres avantageux, mais le traitement se passe en grande partie « en dehors » de 
TYP03. Vous devriez done utiliser USER ou USERJNT. 

TEMPLATE 

Ce cObject vous permet de charger un gabarit HTML. Par contraste avec FILE, vous 
pouvez limiter le contenu du fichier HTML a certaines zones precises. Vous pouvez aussi 
specifier quel contenu remplacera quel marqueur. 
Exemple : 

page. 10 = TEMPLATE 
page .10 { 

template = FILE 

template . file = f ileadmin/templates/test . tmpl 
workOnSubpart = DOCUMENT 
subparts { 

HELLO = TEXT 

HELLO. value = Ce texte remplace la sous-partie "HELLO" 

} 

marks { 

TESTMARKER = TEXT 

TESTMARKER. value = Ce texte remplace le marqueur "TESTMARKER" 

} 

} 
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MULTIMEDIA 

Cet objet permet d'integrer differents fichiers multimedias. Quelques types de fichiers 
possibles sont : TXT, HTML, HTM, CLASS, SWF, SWA, DCR, WAV, AU, AVI, MOV, ASF, MPG 
et WMV 

Selon le type de fichier, vous pouvez specifier certains parametres du fichier. 
Exemple : 

10 = MULTIMEDIA 

10. file = f ileadmin/video/test . avi 
10 .params .width = 200px 

EDITPANEL 

Dans le contexte du concept d'« edition de frontend », les options d'edition d'une page 
sont rendues disponibles dans le frontend pour des utilisateurs identifies dans le back- 
end. 

Exemple : 

temp . editPanel = COA 
temp . editPanel { 

10 = EDITPANEL 

10 { 

allow = toolbar , hide, move, delete 

label = Page courante : <B>%s</Bxbr /> vous pouvez creer ici une 

sous-page ici<br />, 
editer ou deplacer la page 
line = 5 

} 

20 = EDITPANEL 
20 { 

newRecordFromTable = tt_news 
line = 0 

label = Nouveau contenu<br /> Vous inserer ici une actualite. 

} 

} 



5.3.5 Objets de premier niveau 

Pour restituer du contenu sur une page, on a utilise jusqu'a present I'objet page assigne au Reference 110842 

type d'objet PAGE. Ici, I'objet page representee un objet de premier niveau (TL0 pour TopLe- 

velObject). II est situe au plus haut niveau de la hierarchie des objets, ou, d'une autre facon, 

on pourrait dire qu'il est a I'extremite gauche de la configuration TypoScript. TypoScript utilise 

une serie de TL0 qui influencent I'application. Dans la zone « setup » de TSref sont repris 

les TL0 deja definis ainsi que la liste des proprietes et objets qu'ils integrent (par exemple 

FEJABLE, FRAMESET, FRAME, META, CARRAY). Plusieurs objets de premier niveau tels que 

config, constants et FEData ne doivent pas etre d'abord assignes a une type de donnees pour 

etre definis, etant donne qu'ils sont deja predefinis. 

types 

Type de donnee : readonly 
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Reserve a I'usage interne (class.t3lib_tstemplate.php) ; par exemple type=99 est reserve 
a I'affichage de texte en clair. 

resources 

Type de donnee : readonly 

Utilise en interne pour enregistrer dans une liste separee par des virgules les ressources 
pour la hierarchie des gabarits. 

sitetitle 

Type de donnee : readonly 

Reserve a I'usage interne pour inserer le titre du site Web a partir des gabarits. 

config 

Type de donnee : ->CONFIG 

config permet de definir les valeurs de configuration globale pour I'edition des pages, 
le cache, le debogage, la manipulation des liens, etc. Ces valeurs sont sauvees pour les 
pages cachees, ce qui signifie qu'elles sont aussi disponibles si une page est appelee a 
partir du cache. 

constants 

Type de donnee : ->CONSTANTS 

Definit les constantes qui remplacent dans tout le site les passages de texte marques 
dans les elements de contenu. Ceci est realise lorsque les elements de contenu sont 
passes a la fonction parseFunc. Exemple : 

constants . WEBMASTER_EMAIL = webmaster@mon-domaine.com 

FEData 

Type de donnee : ->FE_DATA 

FEData configure le traitement des donnees GET et POST envoyees par les utilisateurs 
via le frontend. II s'agit d'un concept ancien qui est desormais a peine utilise par les 
extensions. Exemple : le livre d'or. 

includeLibs 

Type de donnee : tableau de chames de caracteres 

Vous permet d'integrer des fichiers PHP qui ont leurs propres bibliotheques de fonctions 
a TYP03, de sorte que ces fonctions soient accessibles. Notez que I'objet PAGE fournit 
des proprietes avec la meme fonctionnalite (page.includeLibs). Mais ces proprietes sont 
inserees apres le TLO includeLibs et peuvent ecraser des valeurs dans le TLO. Exemple : 

includeLibs . gmenu_f oldout = media/scripts/gmenu_f oldout .php 

plugin 

Les plugins des extensions sont inseres dans le TLO plugin. Les plugins charges peuvent 
etre vus comme des sous-objets de plugin via leur cle d'extension. 

tt_* 

Le TLO tt_* est utile pour restituer du contenu des tables. Le gabarit standard con- 
tent (default) normalement utilise contient une definition correspondante de la table 
tt_content, et controle done, par-la meme, la restitution de la plupart des elements de 
contenu. 
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temp 

Les TLO temp et styles sont utilises eomme des bibliotheques de code que vous pouvez 
copier pendant I'analyse syntaxique. lis ne sont pas stockes dans le cache avec le gabarit 
mais ils sont toutefois supprimes/vides avant que le gabarit ne soit cache I Utilisez temp 
pour enregistrer vos propres donnees temporaires. 

styles 

Se comporte de la meme maniere que temp, mais n'est pas disponible pour votre usage, 
mais bien pour celui des gabarits par defaut. 

lib 

Sert a definir des bibliotheques de code auxquelles des references sont faites. 



Type de donnee : PAGE 

Vous pouvez choisir le titre que vous desirez. Mais nous vous recommandons d'utiliser 
le titre page pour la definition du TLO de type PAGE. 

Type de donnee : n'importe quel type 

Definissez vos propres TLO et assignez-les aux types de donnees correspondants. 

Les TLO utilises et la hierarchie des objets sont affiches clairement dans le TypoScript Object 
Browser : 




Exemples 
config 

Certaines fonctions sont configurees globalement avec config. Par exemple si vous 
fixez config.simulateStaticDocuments=1 dans le champ Setup du gabarit TypoScript, 
le resultat dans le frontend cree dynamiquement est simule comme s'il eta it compose 
de pages statiques 5 . 

Avec config.cache_period=432000, vous fixez le cache des pages a cinq jours. 
5 Pour les specifications, voirTSref 
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config { 

simulateStaticDocuments = 1 
cache_period = 432000 

} 

constants 

Avec le TLO constants, vous definissez des constantes pour I'application dans son en- 
semble. Ceci vous permet de remplacer les balises specifiques par le texte correspon- 
dent, en utilisant la fonction parseFunc et sa propriete constants=1. Si I'analyseur syn- 
taxique trouve dans le contenu de I'application la constante de I'exemple ###WEB- 
MASTER_EMAIL###, alors le texte webmaster@mon-domaine.com est affiche sous 
forme de lien. 

constants { 

WEBMASTER_EMAIL - <a href - "mailto : webmaster@mon-domaine . com" >web 
master@mon-domaine . com</a> 
} 

lib 

Le TLO lib est prevu pour les bibliotheques de code reuti I isable qui peuvent etre referen- 
cees. Un texte comme celui de I'exemple n'est bien sur pas vraiment adequat ! 

lib.welcomingText = TEXT 
lib . welcomingText { 

value = TypoScript est simplement genial. 

wrap = <p> | </p> 

} 

page = PAGE 
page { 

typeNum = 0 

10 = TEXT 

10. value = Hello Typos! 
20 - < lib.welcomingText 

} 

temp et styles 

Reference 110841 Les objets de premier niveau temp et styles sont particuliers en ceci qu'ils sont supprimes du 
champ Setup apres qu'ils ont ete analyses par TypoScript. Cela signifie qu'il est impossible de 
faire reference a I'objet temp.monObject puisque temp n'existe plus pendant le traitement du 
champ Setup. 

De fait, pour ameliorer les performances, toutes les valeurs TypoScript sont generalement en- 
registrees dans la table de base de donnees cachejiash apres qu'elles ont ete lues. Si certaines 
parties de TypoScript doivent etre stockees temporairement, utilisez les objets de premier ni- 
veau temp et styles. Leurs objets, leurs proprieteset leurs valeurs sont alors copies en differents 
endroits de TypoScript et sont reutilisables. Apres I'analyse syntaxique, toutefois, ils sont sup- 
primes, ce qui permet d'alleger les gabarits stockes dans le cache. L'objet de premier niveau 
temp est destine a vos objets generaux, alors que styles est reserve aux gabarits standards 
(gabarits statiques) inclus dans TYP03. 
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5.4 Outils de developpement 

TYP03 fournit certains outils permettant au developpeur de programmer plus facilement en 
TypoScript. D'une part le module Web — > Gabarit dans le backend propose de nombreuses 
fonctions, et d'autre part, le panneau d'administration peut etre affiehe dans le frontend 
pour fournir de I'aide supplementaire. 



5.4.1 Info/Modify 

Le module Web — > Gabarit — > Info/Modify vous montre la liste des gabarits existant dans 
I'arborescence des pages. Pour cela, choisissez la page racine eomme page eourante en cliquant 
sur le titre du globe dans I'arborescence des pages. Cette liste indique les pages et leurs gabarits 
et distingue parmi ceux-ci les gabarits racines des gabarits d'extension. 

Le module aide egalement a configurer de nouveaux gabarits lorsque la page selectionnee n'a 
pas de gabarit qui lui est associe. Si necessaire, vous pouvez choisir un gabarit statique. 

Vous avez en outre la possibility de sauter au gabarit le plus proche de la page consideree. 



QBH 62C-Au.ueil 
Chemin; /D2C Aceueil/ 



Cieat* e temptete^ecord first in onder to edit constant*' 



INt-AIr NtW WrHMlr 



It you want thie page to b* the root ot a nav website, optionally bat ad on one ot the standard templates, then 
press the button below, 



(HEATH EXTENSION TEMPLATE 



Figure 5.34: 
Info/Modify permet 
de ereer de nouveaux 
gabarits 
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Si vous avez choisi une page associeea un gabarit, vous pouvez editer ce dernier en selectionnant, 
soit des champs precis, soit I'enregistrement complet. Si vous editez un champ, I'assistant TS 
est disponible (voir a la section suivante). De plus, le cache est supprime automatiquement. 



QHCi, B2C-Accuell 
Chemin; /D2C Aceueil/ 



Into/Modify 
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Click hara to edit mhola template record 
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Figure 5.35: 
Edition des 
enregistrements de 
gabarits existants 
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5.4.2 Assistant TS 

De meme que I'edition de contenu pour des types de contenu comme Tableau ou Formulaire 
se fait a I'aide d'un assistant, il en existe aussi pour TypoScript. Vous pouvez naviguer dans les 
types d'objets et les proprietes et les selection ner. 

A la figure suivante, vous voyez comment ouvrir un champ Setup TS pour I'editer, avec le 
module Web — > Gabarit — ► Info/Modify. Avec I'icone assistant TS, vous ouvrez I'assistant 
dans une nouvelle fenetre. 



Figure 5.36: 
Choix d'objets 
TypoScript et de leurs 
proprietes avec 
I'assistant 




Les types d'objets sont d'abord affiehes, chacun d'eux s'ouvrant a I'aide du lien [GO] permet- 
tant une vue detaillee. Dans I'exemple, c'est le cObject HRULER qui est ouvert. La vue detaillee 
montre les proprietes du type d'objet ainsi que ses types de donnees, sa description et ses va- 
leurs par defaut. Si vous cliquez sur le nom d'une propriete, I'assistant se ferme et la propriete 
est inseree dans le formulaire d'entree. Dans notre exemple, les proprietes voulues ont d'abord 
ete collectees dans le champ d'entree de I'assistant par un die sur I'icone « + ». Ensuite, les 
proprietes ont ete entourees du type d'objet en utilisant Entourer. Enfin, lorsque vous cliquez 
sur le lien Transferer ft Fermer, le code est transfere. 

Reference 090547 Meme si I'assistant ne peut remplacer completement TSref, il contient tout de meme la ma- 
jorite de I'information. Les donnees affichees sont creees directement a partir du document 
TSref-OpenOffice. Meme les proprietes des extensions sont lues a partir de la documentation 
correspondante. Decouvrez la maniere de preparer votre documentation d'extension a partir 
de la reference ci-contre. 

5.4.3 TypoScript Object Browser 

Le TypoScript Object Browser (Web — > Gabarit — > Object Browser) a deja ete utilise quel- 
quefois dans les sections precedentes pour afficher le champ Setup. Outre I'affichage des 
champs Setup et Constants, I'Object Browser fournit egalement des fonctions pour tester les 
conditions et pour naviguer entre les constantes et les afficher dans le setup. En plus, I'Object 
Browser permet d'editer les proprietes. 
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L'Object Browser fonctionne toujours sur base de la page courante ou du gabarit associe. Tou- 
tefois, en plus des donnees du gabarit selectionne, toutes les donnees de gabarit accumulees 
depuis la page racine sont montrees. Le TypoScript affiche est celui qui est actif dans le front- 
end lorsque la page assoeiee est montree. Pour tester le comportement des conditions definies 
dans le gabarit, vous pouvez les activer individuellement. 




Q [loginUsar - •] 

□ [ g lobiWar-LIT.O-!l] 




Crop Unas O 

Constants display! Substituted cons tants in graan V 



La fonction de recherche passe en revue les valeurs de proprietes et affiche les resultats en 
couleurs. Si vous choisissez I'option Use ereg(), vous pouvez utiliser des expressions ration- 
nelles. 

Comme indique a la figure precedente, vous pouvez mettre en evidence les constantes dans 
le champ Setup en choisissant d'afficher soit les constantes originales, soit les valeurs de 
remplacement. 

Si vous cliquez sur le nom d'une partie d'un chemin (par exemple property), vous obtenez le 
formulaire suivant : 
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Figure 5.38: 
Edition d'une 
propriete dans 
I'Object Browser 



Q 101 B2C-Accueil 
Chemin: /B2C-Accueil/ 



CURRENT TEMPLATE: 



| TypoScript Object Browser v| 



|<body bgColor="-C$bgC c.l}" link = "{ $link>" vlink="{$vlink}" alink="{j|[ Update"] 
ADD OBJECT PROPERTY: 

paqe.bodyTaq. l |ts| = 

i m 

CLEAR OBJECT: 

page. bodyTag CLEAR? □ [ Clear] 



< Back 

Ce faisant, vous avez I'occasion d'editer la valeur, d'ajouter une propriete ou de supprimer 
I'element choisi avec >. 

Le code TypoScript modifie ou ajoute est ecrit dans le gabarit actuel en s'ajoutant a la fin du 
code existant. II peut done arriver apres un certain temps qu'une masse de code s'accumule et 
que vous deviez la trier a la main. Mais cette option d'edition est d'une grande aide, d'autant 
que I'assistant TS y est egalement disponible. 



5.4.4 Template Analyzer 

Le module Web — > Gabarit — > Template Analyzer a deja ete mentionne dans le contexte des 
gabarits en cascade, puisqu'il permet entre autres d'afficher la hierarchie du gabarit actif. 

Le Template Analyzer montre la hierarchie logique du gabarit pour la page seleetionnee - les 
gabarits utilises pour la restitution dans le frontend. 

Le tableau indique en outre si les options Rootlevel, Clear Constants et Clear Setup sont 
activees pour le gabarit - et indique aussi ND de la page et le niveau (Rootlevel) auquel est 
situe le gabarit. La derniere colonne montre les ID des gabarits integres avec Template on 
next level. 

A la figure suivante, Clear Constants a ete active pour le gabarit appele « An Extension Tem- 
plate » ; ce faisant, les constantes definies dans les gabarits precedents sont desactivees. 

Si vous cliquez sur le titre d'un gabarit, son code s'affiche. Dans I'exemple, nous voyons le 
code du gabarit « Main Template », mais pas les constantes, bien que certaines soient definies 
dans ce gabarit. Cela s'explique par le fait que le gabarit « An Extension Template » est actif 
sur cette page, avec Clear Constants selectionne. Les constantes sont done desactivees et ne 
sont pas affichees. 
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Figure 5.39: 

Le Template Analyzer 

montre la hierarehie 

et le eode de certains 

gabarits 



Linenumbers 0 Syntax HL 0 Block mode □ 




Verifier la syntaxe 

Vous ne pouvez pas tester TypoScript pour verifier si un objet non-existant est appele ou si des 
proprietes ou des valeurs ont ete mal nominees. Ce sont souvent des petites fautes de frappe 
qui nous empechent d'arriver au resultat voulu. Vous pouvez seulement verifier si la syntaxe 
du code est correete. 

A partir de la version 3.6.0 de TYP03, I'option Syntax highlighting est disponible aux deve- 
loppeurs sous Template Analyzer. 

Dans I'exemple ci-dessus, un espace a ete ajoute au chemin d'objet. L'analyse syntaxique vous 
indique des lors que cet espace n'est pas suivi d'un operateur. 



5.4.5 Constant Editor 

Comme nous I'avions decrit a la section 5.2.8, les constantes servent, dans un enregistrement 
de gabarit, a faire passer des valeurs globales ou faciles a manipuler au code du champ Set- 
up. Vous pouvez editer ces constantes de maniere simple et claire a I'aide du Constant Editor 
(Web — > Gabarit — > Constant Editor). De cette facon, grace aux gabarits standards, qui confi- 
gurent des pages Web, changer I'apparence et la fonctionnalite du site avec des constantes 
devient tres simple. 

Les gabarits standards sont particulierement faciles a configurer avec le Constant Editor. Une 
capture d'ecran du gabarit et sa description sont montres a la figure suivante. 
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Figure 5.40: 
Edition du gabarit 
standard GREEN avec 
le Constant Editor 




Le Constant Editor renvoie les valeurs preconfigurees (par defaut) pour le gabarit choisi. Si 
vous devez remplacer certaines valeurs, activez les cases a cocher concernant les constantes 
et rechargez le formulaire. El les sont ainsi placees dans les champs du formulaire et sauvees 
dans le champ Constants de I'enregistrement de gabarit selectionne. 

Mise en evidence des constantes pour le Constant Editor 

Si vous voulez mettre a disposition vos constantes dans le Constant Editor, vous devez posseder 
de I'information supplemental, entre autres sur les descriptions et les intervalles des valeurs 
admises. 

Dansce but, les definitions des constantes doivent etre precedees par des commentaires conte- 
nant des regies syntaxiques precises. 

Exemple : 

# cat=temp.monTexte; type=string; label=Mon Texte 
monTexte.monTextelnput = Hello World! 

Contrairement a TYP03, le Constant Editor tient compte des commentaires lors de I'analyse 
syntaxique des gabarits. II groupe ces commentaires par categories sur base des donnees addi- 
tion nelles dans les commentaires speciaux, et il les affiche avec un descriptif (label) dependant 
de leur type. 

Reference 969386 Regies syntaxiques pour les commentaires : 
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■ Le commentaire est place a la ligne precedant la constante donnee. 

■ Chaque ligne de commentaire est divisee en parametres separes par un point-virgule. 

■ Chaque parametre consiste en une cle et une valeur, separees par un signe egal. TYP03 
fournit les cles suivantes : cat (categorie et eventuellement sous-categorie), type (type de 
constante) et label (texte explicatif). 

Le gabarit mon texte suivant sert d'exemple. Le gabarit definit le texte et sa presentation a 
I'aide de constantes. 

Donnees dans le champ constants du gabarit mon texte : 

# cat=montexte/ctext/a; type=string; label=Mon Texte 
monTextelnput = Hello World! 

# cat=montexte/ctext/b; type=typo; label=Ma Police 
maPoliceTexte = Verdana 

# cat-montexte/ctext/d; type-color; label-Ma Couleur 
maCouleurTexte = red 

# cat=montexte/ctext/c ; type=small ; label=Ma taille de Texte 
maTailleTexte = 32 

Donnees dans le champ setup du gabarit mon texte : 

temp .monContenu = TEXT 
temp .monContenu { 

value = $monTexteInput 

textStyle . face . default = $maPoliceTexte 
textStyle . size . default = $maTailleTexte 
textStyle. color. default = $maCouleurTexte 

} 

Les utilisateurs peuvent facilement modifier les constantes dans le Constant Editor. La figure 
suivante indique les valeurs courantes du gabarit mon texte et de la categorie montexte. 



al M Q, premiers pas / Base 
chemin: /Gabarits/Premiers pas / ...1 


Constant Edito- V 


Figure 5.41: 
Constantes du 
gabarit mon texte 
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Parametres 



Categories (cat) 

Vous pouvez choisir vos categories librement et dies peuvent rassembler diffdentes 
constantes. C'est pourquoi il est judicieux de choisir des termes generaux pour designer 
ces groupements. II est egalement possible d'utiliser les categories preconfigurees qui 
suivent pour les gabarits standards. 

basic 

La categorie basic rassemble les constantes importantes pour les gabarits de mise 
en forme. Ces constantes sont celles de base que vous configurerez probable- 
ment toujours; dies contiennent entre autres la taille maximum des images et 
permettent d'activer plusieurs proprietes. 

menu 

Les reglages du menu dependent du type ; ils comprennent les fichiers de police 
de caractde, les tallies et les arride-plans. 

content 

Les constantes qui influencent I'affichage des dements de contenu. 

page 

Configurations generales concernant la page telles que des balises meta, des des- 
tinations de liens, etc. 

advanced 

Fonctions avancees rarement uti Usees. 

plugin.* 

Constantes pour certains plugins (extensions). 
Exemple : plugin. meta 

Sous-categories 

Les sous-categories regroupent les constantes d'une categorie dans une zone du Con- 
stant Editor et sont ajoutees a une categorie en utilisant le symbole /. Seules les sous- 
categories definies dans la liste ci-dessous sont disponibles. Toutes les autres constantes 
sont automatiquement reprises dans la sous-categorie Others. Specifiez I'ordre dans le- 
quel les constantes sont classees en ajoutant une lettre de a a z. Si vous ne le faites pas, 
la lettre z est prise comme valeur par defaut. 
Exemple : 

# cat-basic/enable/b; type-string; label- Ma Constante 

Sous-categories existantes : 
enable 

Pour les constantes servant a activer ou desactiver les fonctions de base du gaba- 
rit. 

dims 

Pour les dimensions en tout genre telles que les pixels, les largeurs et hauteurs 
d'images, les cadres, etc. 
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file 

Constantes definissant des fichiers comme les images en arriere-plan, les polices 
de earactere, etc. ; d'autres options concernant le fichier sont egalement specifies. 

typo 

Pour la typographic et ses constantes. 

color 

Aide a rassembler les definitions des couleurs ; toutefois, de nombreuses couleurs 
et leurs options sont aussi incluses dans d'autres categories. 

links 

Pour utiliser avec des liens ; typiquement, target. 

language 

Options specifiquesa la langue. 

cheader, cheader_g, ctext, cimage, cbullets, ctable, cuploads, 
cmultimedia, cmailform, csearch, clogin, csplash, cmenu, cshortcut, clist, 
cscript, chtm 

Ces sous-categories sont basees sur les elements de contenu predefinis de TYP03 
tels que du texte, un en-tete, une image, etc. 

Type de champ (type) 

type vous permet de specifier le type de champ et de definir les options d'edition pour 
interface utilisateur du Constant Editor. 

int [low-high] 

Un nombre entier ; I'intervalle des valeurs admises peut etre specifie. 
Exemple : int [0-10] 

int+ 

Nombre entier positif. 

color 

Code couleurs HTML. 

wrap 

Permet d'editer une enveloppe. 
offset [L1.L2 L6] 

Liste de nombres entiers separes par des virgules ; vous pouvez specifier jusqu'a 
six parametres entre crochets. Les parametres par defaut sont x,y. 

options [item1,item2, ...] 

Champ de selection avec titres/valeurs, dans lequel les elements sont separes par 
des virgules ; titre et valeur sont separes par =. 
Exemple : options [titre1=valeur1, titre2=valeur2] 

boolean [valeurvraie] 

Booleen ; vous pouvez specifier eventuellement la valeur de « true ». La valeur 
par defaut est 1. 
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comment 

Booleen ; selectionne = « », non-selectionne = « # ». 

Ce type sert a commenter du texte, et done a desactiver du code TypoScript a 
I'aide d'une constante. 

file [ext-list /IMAGE_EXT] 

Sert a selectionner les ressources desfichiers ; il est possible d'envoyer directement 
des fiehiers vers le serveur pour qu'ils soient associes au champ Resources de I'en- 
registrement gabarit. Vous pouvez restreindre cette selection a certains types de 
donnees precis. Pour ce faire, une liste de types de donnees autorises est specifiee 
dans la liste, par exemple [ttf] ou [txt.html.htm] (sans espace). Vous pouvez aussi 
entrer IMAGE_EXT. Dans ce cas les types de fichier image par defaut sont permis. 

string 

Champ d'entree de texte. 

En-tete et description (label) 

A I'aide du type label vous pouvez specifier un en-tete et un texte descriptif, separe par 
« : » : 

# cat=montexte/ctext/a; type=string ; label= Texte: Le texte apparait sur la 
droite . . . 

monTextelnput = Hello Wolrd! 

Description des categories (TSConstantEditor) 

Vous pouvez aussi faire une description generale pour chaque categorie de constantes. 
Cela s'avere utile, par exemple pour expliquer les gabarits standards a I'aide d'une cap- 
ture d'ecran et d'une description supplemental. 

Les donnees additionnelles sont definies dans les constantes TLO TSConstantEditor. Cela 
vous permet d'assigner des icones numeriques a des constantes donnees et d'integrer 
une image - generalement une capture d'ecran. 

Notez que le TSConstantEditor est defini dans le champ Constants du gabarit. ['utili- 
sation des termes « TLO », « objet » et « propriete » dans le cas des constantes n'est 
pas correct strictement pa riant puisque les constantes ne sont pas des objets. Nous les 
utiliserons neanmoins ici par facilite. 
Exemple : 

TSConstantEditor .mon texte { 
header = Mon Texte 

description = Mon texte est une demo // il contient . . . 
bulletlist = element 1 // element 2 // element 3. 
image = gfx/ scenario- 1 .png 

1 = monTextelnput , Texte 

2 = maPoliceTexte, Couleur 

} 

Nous resumons a present les proprietes du TSConstantEditor : 
header 

Type de donnee : chaine de caracteres 
En-tete de description ; affiche en majuscules. 
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description 

Type de donnee : chame de earacteres 

Description du gabarit ; le passage a la ligne se fait avec la commande //. 
bulletlist 

Type de donnee : chame de earacteres 

Affiche une liste a puces ; les differents elements sont separes par deux barres obliques 
(//)■ 

image 

Type de donnee : image 

Vous pouvez inserer une image pour illustrer les liens. Entrez les numeros des constantes 
decrites sur la figure et leur position dans le frontend. L'image doit etre enregistree 
dans le repertoire gfx/ du module Constant Editor (tstemplate_ceditor) ou integree au 
champ des ressources de I'enregistrement de gabarit. 

Array, 1-20 

Liste de noms de constantes 

Les icones numerotees en rouge sont assignees aux constantes reprises dans le Constant 
Editor via la liste numerique. Elles fonr le lien avec l'image specifiee. 

5.4.6 Panneau d'Administration 

Le Panneau dAdministration fournitdesfonctionsauxediteurs, maisfournitaussi de I'informa- 
tion au developpeur TypoScript. Pendant la restitution du contenu, TSFE retrace le processus 
de restitution ; vous pouvez afficher les informations de debogage dans le panneau d'admini- 
stration. 

Si le panneau d'ad ministration est configure conformementa la section 6 , les options suivantes 
sont disponibles dans la zone TypoScript : 

Afficher I'arborescence 

Lorsque cette option est activee, le resultat est affiche sous forme d'arbre. 

Afficher toutes les dates 

Cette option donne le temps necessaire a la restitution des elements de la page, en 
millisecondes. 

Afficher les messages 

Des explications supplementaires et des messages d'erreur sont indiques dans le log de 
la restitution, que vous activez avec cette option. 

Suivre la generation du rendu 

Cette option donne de I'information sur la restitution des elements de contenu. Le 
resultat est restreint a de I'information generale et a des objets PAGE. 

Afficher le contenu 

Lorsque cette option est active, vous pouvez afficher le contenu genere. Ceci vous per- 
met de voir le code HTML pour I'objet TS correspondant. 

6 La configuration du panneau coadministration est decrite a la section 4.7 
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Requete SELECT 

Grace a cette option, vous pouvez afficher les requetes SQL et les analyser en utilisant 
I'instruetion SQL EXPLAIN. Avee I'introduction de la couche d'abstraction DB dans la 
version 3.6, cette option ne fonctionne plus, mais el le etait de toute facon peu utilisee 
dans la version 3.5. 

Forcer le rendu TS 

Si cette case est decochee, il est probable que la page sera chargee a partir du cache. 
Ainsi, si vous desirez tester votre gabarit TypoScript, vous devriez activer cette option. 

Differents elements du processus de restitution dans le Panneau d'Administration sont en 
couleurs. Les messages sont indiques en noir, les messages d'erreur en rouge et precedes 
d'une icone, les elements de contenu des fichiers (gabarits HTML) en vert et le contenu genere 
en bleu. Les objets TS se trouvant dans le contenu genere sont affiches en rouge a I'endroit 
correspondant, entoures par des crochets. 



Figure 5.42: 
Zone TypoSeript dans 
le Panneau 
d'Administration pour 
I'affichage du 
processus de 
restitution de 
contenu dans le 
frontend 



mm 




B """" 


i 

m 
t 

\ 






i itr ~ 





; LP 22 - 



_ 



5.4.7 Import et export de pages TYP03 

TYP03 fournit dans le menu contextuel, t3d Import and Export, une fonction relativement 
simple qui peut etre tres utile au developpeur, par exemple, pour importer et exporter des ga- 
barits ou des fichiers. II est en outre possible d'exporter des arborescences completes avec leurs 
elements de contenu, dont les medias directement integres comme des documents TYP03 (fi- 
chier t3d), et de les importer dans d'autres applications TYP03. 
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Export t3d 

L'export desenregistrementsse fait a I'aide du menu contextuel Plus d'options.. . — > Exporter 
vers un .t3d. D'abord, vous selectionnez dans I'arborescence la page a partir de laquelle l'export 
est initie. 

Le formulaire suivant sert a specifier la portee de l'export qui peut s'etendre de simples pages 
jusqu'a des arboreseences des pages completes. 



1 Sabarits 



] Visualiser 






} Editer 


$ 




i Nouveau 


% 




i Info 


Q 




E 


Copier 


Sa 






Couper 








«i. - j'- - 






Deplacer ia page 




E 




Assistant 'Nouuel element' 






Historique/Annuler 








Monter en racine 








Module Web>Liste 








Expo^jwi un .t3d © 







Figure 5.43: 
Appel de /'export t3d 
a partir du menu 
eontextuel 



Configurez l'export dans la partie superieure du formulaire. Differentes proprietes et fonction- 
nalites sont disponibles. 




Figure 5.44: 
Determination des 
proprietes d'export 
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ID de page 

ID de la page a partir de laquelle I'export est realise. 
Arborescence 

L'arborescence a exporter, selectionnee via la page d'initiation de I'export et la profon- 
deur des niveaux. 

Niveaux 

Speeifiez la profondeur des niveaux a exporter dans le menu de selection (commencez 
par la page de demarrage selectionnee). 

Include tables 

Vous permet de decider du contenu des tables de bases de donnees a inclure dans 
I'export, contenu inclus dans la section de l'arborescence des pages considerees. 

Include relations to tables 

Si des enregistrements sont lies a des enregistrements situes hors de l'arborescence des 
pages choisies, definissez ici les tables a inclure. 

Use static relations for tables 

Selectionnez les tables en plus des tables statiques pour lesquelles il ne faut pas changer 
les relations. Ce precede a priorite sur les tables reprises dans la section precedente, 
« Include relations to tables ». C'est utile par exemple pour les tables « sysJanguages » 
ou les structures TemplaVoila, oil le systeme de destination de I'import peut contenir les 
merries enregistrements pour ces tables alors que vous importez librement les pages et 
le contenu. 

Exclude elements 

Reprend ici la liste des enregistrements que vous avez exclus de I'import dans la liste 
reprise dans la section Structure a exporter. 

Grace au bouton Update, les configurations choisies sont appliquees. La structure des enregis- 
trements choisis pour I'export est exposee en detail dans la zone inferieure. Si des relations sont 
perdues, elles sont marquees par Lost relation. Si les details sont corrects, I'export demarre 
avec le bouton Download export 7 dans la section File ft Preset du formulaire. 



Import t3d 

L'import de donnees via un document TYP03 est lui aussi lance a partir du menu contextuel a 
I'aide du menu Plus d'options. . . — » Importer depuis un .t3d. Le point de depart est la page 
dans l'arborescence des pages a partir de laquelle les donnees sont integrees. Puisque I'import 
via la page racine (globe) est impossible, vous pouvez demarrer un import via n'importe quelle 
page, par exemple, et bouger ensuite l'arborescence des pages importees. 

7 Si vous rencontrez des difficulties a telecharger, il faut savoir qu'un bogue dans Internet Explorer 5.5 tente de 
sauver la page dans le backend comme un telechargement. 
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Figure 5.45: 
Lancement de 
I'import t3d via le 
menu contextuel 



Le document TYP03 (.t3d), pour etre importe, doit se situer dans le repertoire fileadmin/. Vous 
pouvez transferer directement un fichier vers I'onglet Envoyer, de sorte qu'il soit selectionnable 
pour I'import via le menu de selection. Le bouton Previsualiser montre une previsualisation 
des enregistrements a importer. 



*2| <\ Gabarits 
Chemin: /Gabarits/ 
| Importer | Envoyer | 



Fichier: | 

^ (From path: fileadmin/) 

Import Options: 

Mettre a d Update records 

jour: (T| f^'* option requires that the structure you import already exists on this server and only 
^ needs to he updated with new content') 



op 



i database record and 



I j Do not show differences in records 
(Green values are from the import file, red v 
black values are similar in both versions.) 

" O Allow to write banned file extensions (eg, PHP scripts), if any 

□ Force ALL UIDs values 

(With this option the original UID value of all imported records are forced to be the same. 
BE VERY CAREFUL WITH THIS! (Admin Only).) 



2J 



( Previsualiser~] 

, O Write individual DB actions during import to the log 
• (TMs is disced hy defau* since there may he hundred ore 



Figure 5.46: 
Interface d'import 
pour un document 
TYP03 



5.5 Gabarits standards (gabarits statiques) 

Tout paquetage TYP03 contient deja dans la table static_template des enregistrements qui Reference 546011 
sont seulement lisibles dans le backend ; mais ces enregistrements ne sont pas directement 
modifiables. Ces gabarits sont les gabarits standards bien connus et parfois appeles gabarits 
statiques. Vous pouvez visualiser les gabarits standards dans une liste grace au module Web 
— > Liste, par exemple en selectionnant la page racine (globe) dans I'arborescence des pages. 

Les gabarits standards fournis forment une bibliotheque et sont utilisables pour vos propres 
sites Web. lis constituent des gabarits pour le site complet. lis contiennent egalement quelques 
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composantsTypoScript de base tels que content (default), qui definit I'affichage des elements 
de eontenu et leur mise en forme. 



Figure 5.47: 
Gabarits standards 
contenus dans 
/'installation basique 
TYP03 tels qu'ils sont 
repris dans le module 
Web -» Liste 
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plugln,tt_poll [DEPRECIATED] 
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language.fr ffrench) [DEPRECIATED] 

Uiiyuaye.dt^ (da...»li) [DEPRECIATED] 
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plugln.feadmln.f«_uieri [DEPRECIATED] 
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frame* nt; tnr>-n»g»>-nrjht 
frameset; top-page 

frameset: top-left-page 



aft 

1 



t.3el (default) 

contenttt address f DEPRECIATED] 
content (default) 



Un certain nombre de gabarits sont marques de I'etiquette [DEPRECIATED] qui signifie qu'ils 
sont eonsideres comme anciens ou depasses; ils sont inclus dans la liste pour des raisons 
de retrocompatibilite. En particulier, la plupart des gabarits plugin* sont devenus redondants 
depuis I'introduction du systeme d'extensions, puisque les gabarits correspondants sont fournis 
avec les extensions. 

Pour utiliser les gabarits, inserez-les dans I'enregistrement de gabarit a I'aide du champ Include 
static. 



Figure 5.48: 
Insertion d'un gabarit 
standard 




Include static AFTER basedOn: 

am 

Comme nous I'avons deja mentionne, les extensions comprennent leurs propres gabarits. Ainsi, 
il est possible qu'elles offrent des gabarits standards que Ton peut selectionner dans I'enregis- 
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trement de gabarit avec Include static (from extensions). Ces gabarits assurent le meme role 
que eeux disponibles dans Include static. De cette maniere, meme des gabarits definissant 
I'ensemble d'un site Web sont disponibles. Citons par exemple le gabarit Green implemente 
comme une extension et que vous pouvez telecharger a partir du TER. 

Les gabarits standards sont divises en differentes categories selon leur champ d'application 
et un prefixe correspondant leur est assigne (templates, plugin, contenu, ...). Pour continuer, 
voici une vue d'ensemble des differentes categories. 

5.5.1 content (default) 

Ce gabarit standard est le plus utilise. En general, il ne forme pas seulement la base du site 
Web et celle d'autres gabarits, mais il definit egalement le traitement et la representation de 
base du contenu publie dans le frontend. II applique les objets de contenu aux enregistrements 
correspondants de la table tt_content, selon le type de contenu specifie par le redacteur (le 
champ CType de la table tt_content). Ce gabarit se base sur styles.content.default qui definit 
en detail les differents types de contenu. De plus, styles.sitemap.text et styles.header.gfx1 
sont aussi inclus en tant que gabarits de base. 

Le gabarit reste au centre de TYP03, meme si des developpements recents ont gagne en impor- 
tance, content (default) n'utilise pas seulement le TypoScript pour I'affichage, mais aussi en 
tant que logique de programmation - ce qui n'est en fait pas la tache centrale du TypoScript. 
Mais les exigences envers le TypoScript ont change, en particulier par I'adoption croissante du 
CSS pour la mise en page et par le besoin de favoriser I'acces a des sites Internet aux moins 
valides. II est prevu que TYPOSCRIPT soit allege en transferant certaines fonctionnalites au CSS 
et a des extensions. Ce concept est mis en pratique dans le gabarit css_styled_content dont 
I'extension porte le meme nom. 

De nombreux gabarits standards sont juste des composants de code integres dans un contexte 
plus large. Ces liens entre les gabarits sont visibles dans le Template Analyzer. 



5.5.2 styles* 

styles.content (default) 

styles.tmenu.pagetop 

styles.sitemap.text 

styles.sitemap.gs 

styles.img.logo 

styles.hmenu.tu (EXT1) 

styles.hmenu.tu 

styles.header.gfx1 

styles.gmenujayer.green 



■gg) styles, content (default) 
gg] styles, sitemap, text 
.^ styles, header, afxl 



Figure 5.49: 




content (default) et 
les gabarits de base 
integres dans le 



Template Analyzer 
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styles.gmenu.first (EXT1) 
styles.gmenu.fi rst 
styles.gmenu.bug 

Cette categorie de gabarit fournit des fragments de code a d'autres gabarits standards. Un 
grand nombre de ces gabarits est utilise dans les gabarits de site (template.*) qui se dis- 
tinguent grace a leur suffixe, par exemple styles.hmenu.tu et styles.gmenu.bug. D'autres, 
eommestyles.sitemap.text et styles.header.gfx1, sont utilises par le gabarit content (default). 
Les composants ont ete stockes dans des gabarits distincts pour que vous puissiez les reutiliser 
dans d'autres gabarits standards, lis fournissent des objets de page preconfigures tels que des 
menus, des plans de sites, des en-tetes et des logos. 

styles.content (default) 

Le gabarit styles.content (default) merite une attention particuliere ; il contient une selection 
d'objets TypoScript predefinis a utiliser dans d'autres gabarits, en particulier pour la restitution 
de contenu de base dans le gabarit content (default). L'element le plus connu de ce gabarit 
est styles.content.get, souvent utilise en pratique, qui selectionne les elements de contenu a 
afficher entres dans le backend via la colonne Normal : 

styles.content.get = CONTENT 
styles.content.get { 

table = tt_content 

select . orderBy = sorting 

select. where = colPos=0 

select . languageField = sys_language_uid 

} 

Vous n'etes jamais oblige d'activer separement le gabarit : il est integre automatiquement si 
vous utilisiez le gabarit content (default). De nombreux parametres sont configures par des 
constantes dans ce gabarit (module : Gabarit — > Constant Editor — > Content). 

5.5.3 cSet* 
cSet (default) 

Cette option a ete introduite pour ameliorer I'efficacite lors de la creation de sites Web ; el le 
continue d'etre souvent utilisee en pratique, meme si el le a ete remplacee en grande partie 
par cSet stylesheet, et si des concepts recents tels que I'extension CSS styled content la 
rendent completement superflue. Le gabarit contient seulement des definitions de constantes. 
L'idee centrale du gabarit est de rassembler les definitions de styles.content.default et de 
rendre disponibles de nouvelles constantes globales. Cela permet, entre autres, de definir en 
une entree la fonte pour tous les objets de contenu. Les definitions rassemblees de cette facon 
sont facilement modifiables dans le Constant Editor, dans la categorie CSET. 

cSet stylesheet 

II s'agit d'une alternative moderne : ici, I'accent est place sur I'utilisation de feuilles de style 
en cascade (CSS) inserees dans un fichier separe (media/scripts/defaultstylesheet.css). Vous 
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remplacez les valeurs par defaut en en inserant d'autres dans un fiehier que vous creez et dont 
vous specifiez le nom dans le champ correspondant du Constant Editor. 

# Exemple d' entree dans la section Constants 

content . stylesheet . file = f ileadmin/styles/def aultstylesheet-modif ie . ess 

Ce gabarit ne eontient pas que des constantes, eomme e'est le cas de cSet (default), mais il 
change egalement plusieurs parametres dans la configuration. En particulier, les balises <font> 
sont supprimees, les en-tetes de section remplaces par des en-tetes natifs HTML (h1-h6) et 
<br/> remplace par <p> </p>. 



5.5.4 frameset;* 

frameset; top-page-right 
frameset; top-page 
frameset; top-left-page 
frameset; top / left-page 
frameset; page-bottom 
frameset; left-page 
frameset (+); top / left-adr-page 

Ces modeles pour les sites Web bases sur des cadres (frame) sont utilises en partie dans les 
gabarits des sites decrits ci-apres. Le nom fait reference a la mise en page a realiser; par 
exemple, frameset ; top-page-right signifie : un cadre au-dessus, un cadre pour le contenu 
au centre (page) et un cadre a droite. La taille des cadres est fixee par des constantes. Certains 
gabarits de cadres peuvent s'emboiter. Le gabarit avec (+) ne genere pas une page entiere mais 
sert d'extension a un autre gabarit de type frameset. Ces gabarits ont une valeur didactique 
car ils facilitent la comprehension de la manipulation de cadres en TypoScript. En pratique 
toutefois, la mise en page utilisee est rarement celle couverte par ces modeles. 



5.5.5 template;* 

Les gabarits contenant ce prefixe sont des gabarits prets a I'emploi, facultatifs pour I'affichage 
du site Web. Ils sont bases sur le gabarit standard content (default) pour la restitution du 
contenu. 

Verifiez que le gabarit standard desire est au debut de la liste des gabarits standards inclus. 
Vous pouvez faire quelques ajustements tres facilement avec le Constant Editor. 

Ces gabarits sont ideaux non seulement pour les exemples mais aussi pour les sites Web qui 
doivent etre mis en ligne rapidement. Les exemples sont relativement anciens et sont bases 
soit sur des gabarits TypoScript purs, soit sur Integration de gabarits HTML ou encore sur des 
cadres. Un groupe de projet s'est forme au sein de la communaute TYP03, avec pour but de 
creer de nouveaux gabarits munis d'une charte graphique moderne et repondant aux normes 
d'accessibilite. Ces gabarits seront alors deplaces dans une extension. 
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Figure 5.50: 
Site Web base sur 
certains gabarits 
standards 




template; CANDIDATE template; BUSINESS template: MM template: BUG 




Les gabarits prets a I'emploi actuels et leur application : 
TU 

TU est un gabarit sans cadre. Vous pouvez preciser une image d'en-tete et la couleur 
d'arriere-plan de la page. Le menu graphique sur le cote gauche comprend deux ni- 
veaux ; la couleur est modifiee lorsque la souris est positionnee sur un element du menu 
ou pour les elements de menu actifs. Vous pouvez ajouter des images en arriere-plan 
des elements du menu et definir leur police de caractere TrueType, leur couleur et la 
taille de texte ainsi que la marge. II y a aussi une option pour inserer des graphiques 
avant et apres le menu (les fameux clear.gif). 

RE 

Ce gabarit se base sur des cadres. Le cadre superieur contient un menu graphique pour 
le premier niveau, le cadre de gauche un menu graphique pour le second niveau. Le 
troisieme cadre contient les elements de contenu de la page. II existe trois etats pour 
les elements de menu (images et couleurs en arriere-plan, couleur du texte, etc.), a 
savoir Normal, Rollover et Active. Si vous le desirez, vous pouvez definir une image en 
arriere-plan de chaque cadre et ajouter un graphique en dessous du menu de gauche. 
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NEWSLETTER 

Ce gabarit sert aux pages sans menu. Comme son nom I'indique, il est prevu pour en- 
voyer des bulletins d'information sous forme d'email HTML a I'aide de I'extension Direct 
Mail module. Le fichier gabarit HTML sur lequel il est base determine la mise en page. 
Vous pouvez choisir d'avoir une ou deux colonnes. Le logo dans I'en-tete n'est pas defini 
dans ce gabarit HTML mais il est configure directement via TypoScript. 

HYPER 

HYPER est un gabarit base sur des cadres composes d'un en-tete avec un menu de 
couches DHTML et sur un cadre a une colonne pour les elements de contenu. Le titre 
de la page est affiche dans une image et vous pouvez specifier un logo pour la section 
d'en-tete. Lappa rence des pages est parametree par les feuilles de style. 

GREEN 

Ce gabarit d'une page se base sur un gabarit HTML. Cela signifie que tous les elements 
tels que le menu principal, les sous-menus, I'image d'en-tete, le logo, le titre de la page 
et son contenu sont places dans ce fichier avec les marqueurs correspondants. Vous 
pouvez modifier le gabarit HTML comme vous le voulez. Le menu est un menu popup 
DHTML dans lequel le premier niveau est de type graphique et le second de type texte. 
En option, un autre menu de texte peut etre defini en troisieme niveau. Vous pouvez 
egalement mettre le titre de la page en deca du menu. Les images en arriere-plan des 
tableaux et de leurs cellules sont definies avec TypoScript. 

glOck 

Ce gabarit standard est base sur une table a trois colonnes. Le premier niveau du menu, 
de type texte, est dans la colonne de gauche, le second niveau dans la colonne de 
droite. Chaque colonne est optionnelle et peut etre desactivee en utilisant TypoScript. 
Vous avez la possibility de definir un logo, une image en arriere-plan et des elements de 
contenu pour chaque colonne. Vous pouvez ajuster en detail les marges, les largeurs et 
les alignements. L'arriere-plan de la page et sa couleur sont aussi modifiables. Ce gabarit 
est entierement configure par TypoScript. 

FIRST 

FIRST est un gabarit base sur des cadres dans lequel les cadres Menu, Bottom et Page 
frame sont emboites dans un autre cadre qui centre la page dans le navigateur. Les 
menus sont disposes graphiquement sur deux niveaux. Dans le cadre Bottom se trouve 
un menu general d'un repertoire. Determinez la couleur d'arriere-plan et les dimensions 
des trois cadres ou integrez eventuellement une nouvelle colonne avec des actualites 
associees a une page specifique. 

CrCPH 

CrCPH est un gabarit d'une page base sur un gabarit HTML. TypoScript est moins utilise 
ici. Vous pouvez modifier de grandes parties de la mise en page en editant le fichier 
gabarit avec votre editeur HTML prefere. Les deux menus textuels sont aussi definis 
directement dans le gabarit HTML. 
CANDIDATE 

CANDIDATE est un gabarit d'une page contenant deux colonnes de contenu et un menu 
textuel a un niveau, situe en dessous de I'image d'en-tete dans la colonne principale. 
Le titre de la page (ou le sous-titre s'il en existe un) apparait sur I'image d'en-tete, mais 
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vous pouvez egalement le desactiver. Vous pouvez aussi desactiver la colonne de droite 
ou I'afficher plutot a gauche. II vous est aussi possible de placer I'image d'en-tete sur les 
deux colonnes ou de changer cette image dans une sous-pa rtie du site Web. La premiere 
image est affichee pour toute la section su site correspondant aux pages de premier 
niveau. La largeur et la couleur de I'espace entre les deux colonnes sont specifies ou 
reduites a zero. 

BUSINESS 

BUSINESS est un gabarit base sur des cadres avec une simple mise en page en deux 
colonnes. Le menu se trouve dans le cadre de gauche et le contenu de la page dans celui 
de droite. Vous pouvez definir les images en arriere-plan pour chaque cadre et choisir 
la largeur pour le cadre de gauche. Le menu est textuel et contient deux niveaux. Les 
balises de fontes sont ajustables dans les deux niveaux. Au deuxieme niveau, vous avez 
la possibility de placer des graphiques devant chaque element de menu, qui peuvent 
changer lorsque la souris est placee a leur niveau. Dans I'en-tete de la page, le titre des 
pages a un niveau superieur est indique en reprenant deux niveaux superieurs a la page 
courante ; vous pouvez definir, comme pour les menus, les balises de fontes pour le titre 
de cette page. II est possible de tracer une ligne en dessous du titre de la page et d'en 
definir la couleur. 

MM 

MM est un gabarit d'une page contenant dans la zone d'en-tete un menu base sur des 
images. Vous pouvez definir des images en arriere-plan et la couleur de celui-ci, ainsi 
que la couleur et la largeur des bords. De plus, vous pouvez specifier les elements de 
contenu pour une seconde colonne eventuelle et determiner la couleur et les images de 
son arriere-plan, de meme que d'autres en-tetes standards et proprietes du texte. Vous 
pouvez ajouter un decalage entre les deux colonnes et choisir librement les images 
et la couleur de I'arriere-plan. Pour le menu, les options de configuration suivantes 
existent : couleur de I'arriere-plan, fonte TrueType, couleur de texte, taille et espacement 
de I'image. 

BUG 

BUG est un gabarit compose de cadres. Trois cadres sont disponibles : un au-dessus de 
la page, un a gauche et un a droite. Vous pouvez configurer la taille et la couleur de 
I'arriere-plan pour tous les cadres. Vous pouvez inclure un graphique dans le cadre du 
dessus et preciser I'apparence du menu graphique dans le cadre de gauche : image en 
arriere-plan pour I'ensemble du menu et pour les elements de menus, effets de survol 
(pour la couleur du texte et/ou des graphiques avant ou apres le titre de la page), polices 
de caractere TrueType, couleurs de texte, tailles, ombrages et espacements. 

5.5.6 plugin.* 
plugin.tt_rating [DEPRECIATED] 

plugin.tt_board_list [DEPRECIATED] 
plugin.tipafriend [DEPRECIATED] 
plugin. postitl 



5.5 Gabarits standards (gabarits statiques) 



plugin.meta [DEPRECIATED] 
plugin.feadmin.fe_users [DEPRECIATED] 
plugin.feadmin.dmailsubscription [DEPRECIATED] 
plugin.alt.xmlnewsfeed (89) 
plugin.alt.xml (96) 
plugin.alt.wap (97) 
plugin.alt.print (98) 
plugin.alt.plaintext (99) 
plugin.alt.pda (95) 

Les plugins sont responsables de I'affichage et des caraeteristiques des elements de contenu 
specifiques dans le frontend. lis eontiennent normalement leurs propres fonctions PHP. Les ga- 
barits standards avec le prefixe plugin. se divisent en deux groupes. Le premier groupe reprend 
des elements de contenu qui seront inseres dans le frontend lors du processus de restitution 
de contenu, par exemple plugin.tt_news ou plugin.feadmin.fe_users. Le second groupe (plu- 
gin.alt.*) genere des pages completes qui sont traitees et affichees differemment des pages de 
contenu normales. Selon qu'il s'agit d'une version imprimee, d'une version texte, d'une version 
XML ou d'une version WAP pour les telephones mobiles, le contenu est affiche differemment. 
Alors que la version pour I'impression est implementee uniquement avec TypoScript, c'est un 
tout autre moteur de restitution qui est utilise pour le plugin XML. Grace a leur capacite a af- 
ficher du contenu dans plusieurs formats differents, la fonctionnalite des gabarits plugin. alt. 
evolue vers la publication « cross-media ». 

Presque tous les plugins du premier groupe recoivent I'etiquette DEPRECIATED car lors de 
I'introduction de I'Extension Manager, tous les gabarits ont ete deplaces vers les extensions 
correspondantes. Ces gabarits ne devraient pas etre utilises pour de nouveaux projets. Mais ils 
sont toujours dans la liste des gabarits standards, pour des raisons de retrocompatibilite. 

5.5.7 temp* 

temp.tt_board (shared) [DEPRECIATED] 

Les gabarits temp sont des gabarits d'aide qui servent de composants ou d' « extraits de 
code» a d'autres gabarits. temp.tt_board (shared) est contenu dans la fonction du plugin 
forum et sert de base a deux autres gabarits : plugin. tt_board_list et plugin. tt_board_tree. 
II se charge de I'affichage general et de la configuration du forum TYP03. Les deux autres 
gabarits du forum qui affichent des listes et des arborescences utilisent les parametres de base 
de ce gabarit d'aide. Les trois gabarits sont declasses car ils ont ete deplaces dans I'extension 
Message board, twin mode (tt_board). 

5.5.8 content.tt_* 
content.tt_address [DEPRECIATED] 

Cette methode est utilisee pour afficher directement les enregistrements de tables, ici tt_ad- 
dress. L'affichage des adresses ne requiert pas de plugin avec fonctionnalite PHP, mais est mis 
en forme par de simples objets TypoScript. Ce plugin est aussi declasse car il a ete remplaee 
par le gabarit de I'extension Address list (tt_address). 



263 



5.5.9 (example) 

records (example) 

De meme que le gabarit content.tt_address, ce gabarit d'exemple montre comment le resultat 
du contenu des tables etendues (tt_address, tt_links, tt_news, etc.) peut etre restitue simple- 
ment avec TypoScript. Vous ne devriez pas I'utiliser dans vos projets car il sert d'exemple. 

5.5.10 language* 

language.no (norwegian) [DEPRECIATED] 
language.nl (dutch) [DEPRECIATED] 
language.fr (trench) [DEPRECIATED] 
language.dk (danish) [DEPRECIATED] 
language.de (german) [DEPRECIATED] 

Les gabarits de langue servent a configurer differentes langues et constituent un ancien 
element caracteristique de TYP03. lis sont presque devenus inutiles et ce, pas uniquement 
parce qu'ils ont ete deplaces dans une extension. Meme dans ces extensions, ils ne sont plus 
mis a jour, car le controle des langues est a present enregistre dans des fichiers precis de cer- 
taines extensions. Dans les anciennes versions de TYP03, ils servaient a la traduction des plu- 
gins et de certains objets de contenu comme les formulaires d'identification ou de recherche ; 
ils sont toujours presents pour la retrocompatibilite. 



5.6 Les bases de la mise en page - Concepts de gabarit 

Lorsque vous developpez une application Web avec TYP03, vous etes confronte au choix de 
la methode a utiliser. Selon vos connaissances dans le developpement de sites Web et les 
exigences du projet ou du client, vous allez decider si la mise en page doit etre basee sur des 
tables HTML ou des feuilles de style en cascade (CSS), si vous utilisez des cadres, . . .Vous devriez 
prendre ces decisions importantes independammentdeTYPCG, puisque toutes les options sont 
realisables avec ce CMS. 

A I'etape suivante, vous decidez de la methode a utiliser pour repondre aux exigence de la 
mise en page et pour inserer les elements de contenu par TYP03. Le fait qu'il y ait plusieurs 
methodes empeche quelque peu de garder a I'esprit une vue d'ensemble et de faire le bon 
choix lors de votre premiere utilisation de TYP03. Les methodes de gabarit sont brievement 
caracterisees ci-dessous ; ensuite, nous presenterons chaque mise en pratique. 

5.6.1 Gabarits standards (gabarits statiques) 

TYP03 vous fournit des gabarits complets prets a I'emploi pour les sites Web, denommes « ga- 
barits standards ». Leur apparence et leurs fonctionnalites sont deja configurees mais peuvent 
etre ajustees dans une certaine mesure par des constantes. Ces gabarits sont consideres avant 
tout comme de tres bonnes references pour apprendre a travailler avec TypoScript, mais ils 
peuvent bien entendu etre aussi utilises en production. Si vous devez respecter la charte gra- 
phique definie au sein de I'entreprise ou repondre a des exigences precises, le developpeur 
atteindra rapidement les limites de la parametrisation des gabarits standards. 



5.6 Les bases de la mise en page — Concepts de gabarit 



5.6.2 Gabarits TypoScript purs 

La mise en page de base d'un site Web est entierement determinee a I'aide de TypoScript, sans 
que vous deviez utiliser de fiehiers HTML externes. Cette methode vous permet de travailler de 
deux manieres : 

■ II est possible de specifier rapidement une presentation sous forme de tableau en utilisant le 
cObject CTABLE qui divise un site Web en zones telles que topMenu, leftMenu, rightMenu, 
bottomMenu et content-cell. 

■ La mise en page est entierement controlable via CSS en enveloppant tous les elements de la 
page avec la balise HTML <div>. Cette technique est ideale pour implementer des sites Web 
repondant aux normes d'aecessibilite. 

Les mises en page controlees par des tables ou des feuilles de style peuvent a present etre 
implementees par Integration de gabarits HTML. Les gabarits TypoScript purs ont neanmoins 
certains avantages : 

■ Toute I'information qui controle I'affichage se trouve en un seul endroit et el le n'est pas 
stockee dans des fiehiers HTML externes. Cela apporte plus de clarte et permet un controle 
complet. 

■ Vous pouvez construire le code HTML de maniere modulaire en utilisant les champs Con- 
stants et Setup de TypoScript. Cela facilite les modifications reservees a certaines sections 
d'un site. 

■ Les gabarits TS peuvent etre mis en cascade alors que les gabarits HTML ne le peuvent 
pas. Vous pouvez ainsi emboiter un gabarit de mise en page pour servir de base a d'autres 
gabarits, ou pour surcharger des proprietes de gabarits dans une section de I'arborescence. 

L'utilisation d'un gabarit HTML externe est devenue a peine necessaire (surtout pour les mises 
en page implementees via CSS et qui n'utilisent pas de tables), e'est-a-dire qu'elle ne presente 
aucun avantage, puisque les zones de la disposition de base sont seulement marquees des 
balises <div> et que tout le reste est controle via CSS. 

5.6.3 Gabarits TypoScript et HTML 

Meme si les methodes utilisant des gabarits TypoScript purs sont extremement flexibles et 
done efficaces, les maquettes HTML sont de plus en plus utilisees de par leur simplicity. Pour 
cette raison, les developpeurs ont I'opportunite d'integrer des gabarits HTML externes via le 
cObject TEMPLATE. Le concept consiste a remplacer des zones du gabarit HTML, signalees par 
des marqueurs (subparts et marks), par des elements de contenu de la base de donnees. 

Les avantages de I'integration de gabarits HTML sont les suivants : 

■ Du point de vue d'un developpeur de sites Web, ces gabarits sont implementes tres rapide- 
ment avec un temps de preparation tres court. 

■ Les mises en page de base se font avec des editeurs externes. 

■ Pour un travail d'equipe, les graphistes et les developpeurs TYP03 peuvent travailler en 
parallele si les zones de contenu et les fonctionnalites ont ete precisees des le depart. 
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5.6.4 Template Auto-Parser 

Reference 591606 TYP03 ne serait pasTYP03 s'il n'essayait pas d'ameliorer et de simplifier les procedures d'edition. 

C'est precisement I'objectif de I'extension Template Auto-Parser. Son utilisation permet I'ana- 
lyse syntaxique des gabarits HTML a inclure pour marquer automatiquement les sous-parties 
(subparts) correspondantes. El les sont identifies par ND des elements HTML tels que <div>, 
span et td. En outre, tous les chemins des feuilles de style et des images du gabarit HTML sont 
adaptes pour les faire pointer dans le bon dossier du systeme de fichiers de fileadmin/. De la 
documentation detaillee sur le Template Auto-Parser est fournie a la section 5.9.2 ainsi que 
dans le didacticiel « Modern Template Building, Part 1 » (voir la reference). 

Les avantages et les desavantages du Gabarit Auto-Analyseur sont les suivants : 

■ La methode s'adresse principalement a des agences et a des developpeurs Web dans le 
cadre de integration graphique d'une maquette HTML. Les resultats sont rapides car on 
ne doit pas ajouter a la main les marqueurs subparts. Mais les sentiments subjectifs du 
developpeur TYP03 sont que le Template Auto-Parser prend dans une certaine mesure tout 
le « controle » du processus. 

■ Si les roles sont echanges lors du developpement, il n'y a pas de risque que le graphiste 
supprime accidentellement les marqueurs subparts dans le gabarit HTML. 

5.6.5 TemplaVoila 

Reference 003992 La methode d'integration de gabarit la plus recente est appelee TemplaVoila. II s'agit juste 
d'une extension (TemplaVoila !) qui est apparue dans le contexte d'un projet assez important 
pour le groupe francais Dassault Systemes. Ce projet en est toujours pour I'instant a I'etape 
alpha et de nombreux developpements doivent encore etre accomplis. Mais cela vaut tout de 
meme la peine de jeter un oeil a ce concept et a ses perspectives, au moins pour le comparer a 
d'autres solutions. 

TemplaVoila permet d'implementer le graphisme en quelques minutes (au lieu de quelques 
jours) pourvu qu'un gabarit HTML soit disponible. La zone de contenu de la page est divisee en 
zones pouvant contenir diffe rents formats d'elements de contenu. Cette technique remplace 
I'organisation de contenu en colonnes utilisee dans TYP03. Dans ce but, une nouvelle option 
vient de s'ajouter a la liste deja tres longue des options pour la gestion des gabarits. El le fournit 
une interface graphique au developpeur pour la definition graphique des elements de contenu 
en selectionnant les fichiers de graphisme HTML. 

Les avantages de TemplaVoila sont les suivants : 

■ Cette approche rend la structure et la composition des blocs et des zones de contenu plus 
flexibles, avec tous les avantages d'un CMS et du controle extensif habituel du graphisme. 

■ De nouveaux elements de contenu peuvent s'ajouter tres rapidement a I'aide de gabarits et 
etre utilises immediatement sans devoir les programmer. 

■ Vous pouvez definir des regies de controle pour determiner les combinaisons possibles des 
elements de contenu. 

TemplaVoila en est toujours au stade de developpement. Des concepts techniques, qui etaient 
jusqu'a maintenant lies de pres a I'organisation du contenu via des colonnes, doivent encore 
etre implementes. 
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5.7 Restitution du contenu 



Mais TemplaVoila promet de presenter des avantages considerables dans le futur. Le concept 
est illustre plus en detail a la section 5.13.3. 

Nous renvoyons tous ceux qui veulent essayer d'utiliser TemplaVoila dans son etat actuel au 
didacticiel tres detaille « Futuristic Template Building ». 



5.7 Restitution du contenu 

Independamment de la maniere dont vous avez implements la mise en page de base, il y a 
differentes possibility pour la restitution du contenu. Les methodes de restitution dans le 
frontend ne sont pas restreintes a I'HTML. 

Le contenu peut s'afficher comme du simple texte ou du XML. Mais meme I'HTML a change 
avec le temps de sorte que XHTML et accessibility sont des mots-cles de nos jours. 

TYP03 offre plusieurs solutions et vous pouvez en developper d'autres vous-meme. Evidem- 
ment, la mise en page de base doit correspondre au format du contenu et doit etre omise 
lorsque besoin est (par exemple avec du texte pur). 

Afin d'acquerir une comprehension de base de la restitution de contenu, nous devons revenir 
en arriere. Comme vous le savez deja, TypoScript n'est pas un langage de programmation ; il 
sert plutot a determiner I'ordre du traitement des fonctions PHP a appeler et a determiner leurs 
parametres. Si vous definissez un objet de type TEXT, la fonction du meme nom (dans ce cas), 
TEXTfJ, situee dans le script PHP tslib/class.tslib_content.php, est appelee pendant le traite- 
ment du champ Setup de TypoScript, et le resultat correspondant est affiche. Les fonctions de 
restitution contenues dans le script ont ete developpees a un moment ou I'utilisation de CSS 
eta it impensable, car soit les navigateurs ne supportaient pas du tout CSS, soit ceux-ci etaient 
inutilisables car ['implementation comportait trop d'erreurs. II y a done eu une evolution cer- 
taine dans les concepts de restitution en TYP03, evolution qui n'est pas encore terminee, et 
qui continuera certainement tant que la technologie du Web changera. 

Les differentes variations dans la restitution HTML sont definies dans les gabarits standards 
suivants, qui vous sont deja familiers : 

content (default) 
cSet Stylesheet 
css_styled_content 

content (default) est le plus ancien gabarit de restitution de contenu. II utilise des balises 
<font> pour I'affichage. Le gabarit cSet stylesheet constitue une transition dans la resti- 
tution avec CSS en redefinissant purement et simplement les valeurs de content (default) 
de sorte que plus aucune balise <font> n'est utilisee. Neanmoins, les fonctions de la classe 
class.tslib_content.php sont utilisees pour la restitution, en recourant frequemment a des 
tables pour la disposition et a d'autres techniques qu'il serait plus judicieux d'implementer avec 
CSS. L'extension CSS styled content a ete developpee pour cette raison. El le utilise egalement 
les fonctions de restitution de class.tslib_content.php, mais remplace certaines fonctions par 
les siennes. 

Le developpement de CSS styled content n'est pas encore termine, mais vous pouvez deja 
utiliser cette extension pour vos propres projets. 
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En plus de I'affichage HTML, TYP03 offre plusieurs autres formats predefinis utilisables pour 
les gabarits standards suivants : 

plugin.alt.xmlnewsfeed (89) 
plugin.alt.xml (96) 
plugin.alt.wap (97) 
plugin.alt.print (98) 
plugin.alt.plaintext (99) 
plugin.alt.pda 

Les noms des gabarits donnent deja quelques indications sur les formats qu'ils generent. Leurs 
propres scripts sont souvent utilises pour I'affichage et vous n'utiliserez generalement plus les 
fonctions de la classe class.tslib_content.php. 

5.8 Changer de gabarits avec type/typeNum 

II est souvent interessant d'afficher du contenu dans le frontend sous differents formats ou 
differentes versions. Un exemple classique est le format pour I'impression. Mais il est aussi 
possible de fournir du contenu a d'autres sites Web avec du contenu local via XML . 

Afin que differentes versions d'une page puissent etre utilisees en meme temps, TYP03 fournit 
un systeme supportant simultanement plusieurs gabarits. Lors de la restitution, un seul gabarit 
est selectionne. 

Le gabarit TypoScript suivant devrait vous aider a comprendre ce concept : 

temp . content = TEXT 

temp . content . value = HELLO WORLD! 

temp . content .wrap = <hl>|</hl> 

page = PAGE 
page . typeNum = 0 
page. 10 = COA 
page. 10 { 
10 = IMAGE 

10. file = media/uploads/typo3powerl .gif 
2 0 < temp . content 

} 

plaintext = PAGE 
plaintext . typeNum = 9 9 

plaintext . config .disableAHHeaderCode = 1 
plaintext. 10 = COA 

plaintext. 10. stdWrap . stripHtml = 1 
plaintext. 10 { 

10 < temp. content 

} 

Les elements de contenu a afficher (HELLO WORLD !) sont definis a I'aide de I'objet temp.con- 
tent utilise dans les deux configurations de page page et plaintext pour rendre les elements 
de contenu disponibles. Comme nous le verrons plus tard, c'est styles.content.get qui est ge- 
neralement utilise pour recuperer les elements de contenu dans la base de donnees. 



5.9 Creation de gabarits TypoScript 



Ainsi, avec page et plaintext, deux gabarits existent pour I'affiehage de la page, page definit 
I'affichage HTML elassique et contient aussi une mise en page de base, a savoir I'affiehage du 
logo TYP03 avant le eontenu proprement dit. 

La sortie HTML (abregee) suivante est generee dans le frontend : 

<!DOCTYPE html 

PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ /EN" > 
<html> 
<head> 

<title>test plaintext</title> 

<meta http-equiv="Content-Type" content= " text/html ; charset=iso-8859-l " /> 
<meta name=" generator" content^ " TYP03 3.8 CMS" /> 
</head> 

<body bgcolor="#FFFFFF"> 

<img src- "media/uploads/typo3powerl .gif " width-"186" height-"43" border-"0" 

alt="" titles"" /><hl>HELLO WORLD!</hl> 

</body> 

</html> 

D'autre part, le gabarit plaintext devrait afficher du texte normal sans balises HTML. II faut 
savoir que TYP03 offre une meilleure option d'affiehage de texte avec le gabarit standard plu- 
gin.alt.plaintext (99), et que ee gabarit est utilise ici uniquement en guise d'exemple. Comme 
vous le voyez, la mise en page est differente (pas de logo). De plus, config.disableAIIHeader- 
Code=1 est configure pour I'objet PAGE, ce qui a pour effet de bloquer I'affiehage de I'en- 
tete HTML, et grace a stdWrap.stripHtml=1, tout le code HTML est supprime des elements 
de eontenu crees dans I'objet COA. Ce gabarit ne genere done reellement que le texte HELLO 
WORLD!. 

Mais comment peut-on selectionner le gabarit plaintext ? La solution reside dans les valeurs 
typeNum. 

page. typeNum = 0 
plaintext . typeNum = 99 

Si vous appelez la page dans le frontend et que vous ajoutez le parametre type=99 a I'URL (par 
exemple http://www.example.org/?id=36£ttype=99), TYP03 choisit le gabarit ad hoc, e'est- 
a-dire celui pour lequel la valeur 99 est assignee a la propriete typeNum. Ce faisant, toutes les 
variations dans le resultat sont utilisables. Le meme meeanisme s'applique aux cadres. Cette 
question est examinee plus en detail a la section 5.12. 

Les nombres mentionnes entre parentheses dans les gabarits standards plugin.alt* sont les 
valeurs typeNum utilisees. 



5.9 Creation de gabarits TypoScript 

Maintenant que nous avons etabli les fondations de I'utilisation des gabarits et de Typo- 
Script, nous pouvons exposer en pratique le developpement des gabarits d'un site. Pour ce 
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faire, nous utiliserons le scenario BT3 qui a deja ete configure au chapitre 3.10. Nous allons 
a present donner une apparence au frontend en appliquant un scenario. Nous utiliserons a 
cet effet les differents sites a notre disposition dans I'exemple pour illustrer les possibilites du 
developpement de gabarits. Un gabarit HTML a ete fourni par le graphiste pour la mise en page 
de base. II comprend deja une structure de base et une ebauche des fonctionnalites a integrer. 



Figure 5.51: 
Le gabarit graphique 
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La page contient plusieurs elements : 

1. Dans I'en-tete de I'application, un menu rootline montre le chemin de la page courante 
en partant de la page racine adequate. Un lien permet d'obtenir la version imprimable. 

2. L'en-tete contient le logo et des images qui changent en fonction du titre de la page et 
de I'endroit oil on se trouve dans le site. 

3. En dessous se trouve la navigation sous forme d'un menu horizontal. 

4. Les elements de navigation de niveau inferieur et ceux du menu meta sont situes dans 
une colonne sur la gauche. 

5. La zone du contenu de la page est placee au milieu, avec une possibility d'extension vers 
le bas de la page. 

6. En option, des zones du site peuvent afficher des informations supplementaires ou des 
actualites, dans une colonne sur la droite. 

7. Pour terminer, il y a un pied de page avec, par exemple, un sigle copyright. 

Reference 821706 Si vous voulez travailler sur les exemples, telechargez les gabarits et les ressources necessaires 
sous forme de documents TYP03 (t3d) et d'une archive tar via la reference ci-contre et integrez- 
les dans votre application. 
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Gardez TSref a portee de main, ou ouvrez I'assistant TS dans le backend (cf. section 5.4.2) : il 
vous permettra de naviguer commodement a travers les definitions d'objets. 



Stucture des gabarits 

Pour etre complet en abordant les exemples et vous fournir du materiel pour les reconstituer, 
les gabarits sont construits de maniere tres modulaire. Nous avons utilise ici des gabarits en 
cascade. Plusieurs composantes des fonctions sont developpees graduellement et integrees 
a des gabarits parents. Cela vous permet de travailler efficacement et d'utiliser les gabarits 
plusieurs fois dans differents exemples. 

Les gabarits en cascade sont obtenus de deux manieres differentes : 

■ Traditionnellement, des gabarits sont integres a un autre gabarit a I'aide de Include basis 
template. Cette procedure a aussi ete utilisee pour les gabarits standards fournis parTYP03. 

■ II est aussi possible d'emboiter des gabarits via des zones de page, c'est-a-dire de placer un 
gabarit sur une page, et done de I'activer de ce fait automatiquement. Ce precede est utilise 
soit pour ecraser des valeurs pour des parties precises du site Web, soit pour configurer une 
fonctionnalite specifique pour ces parties. 

On obtient une vue d'ensemble des gabarits repartis dans une application a partir de la page 
racine (cliquez sur le nom de votre installation situe a cote du globe et choisissez le module 
Web — > Gabarit). Si vous avez reconstitue tous les exemples, votre resultat devrait ressembler 
a la figure suivante. 



This is an overview of the pages in the database containing one or more template 
records. Click a page title to go to the page. 
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Figure 5.52: 
Vue d'ensemble du 
gabarit a partir de la 
page racine 
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Nous avons defini le titre (Website title) uniquement dans chaque gabarit racine de site 
(« Portail », « B2C », « B2B », .. .), e'est-a-dire dans les « gabarits principaux » (B2C main 
template, B2B main template, ...). La configuration TypoScript effective et I'insertion de ga- 
barits standards sont realisees dans les gabarits de base correspondants. Nous I'avons aussi 
fait au niveau des pages. Comme vous le voyez sur la figure precedents, les gabarits sont crees 
par exemple dans les pages « Revendeurs» ou « Affiliation » du site Web « B2B ». Ceux-ci 
permettent une configuration plus detaillee via Include basis template. Les gabarits de base 
utilises dans ce chapitre sont tous situes dans le repertoire Gabarits du systeme et dans ses 
so us- repertoires. Cette procedure vous permet d'inserer, d'echanger et de tester rapidement 
les differentes methodes a I'aide de ces enregistrements de gabarits. 

La figure suivante nous montre un exemple de gabarits en cascade partant du site « B2C ». 




5.9.1 TypoScript et gabarits HTML 

Reference 905945 Nous voudrions illustrer I'utilisation de fichiers HTML pour la mise en page de base a partir du 
site « B2C ». L'integration de gabarits HTML externes a un gabarit TypoScript est une methode 
simple et souvent utilisee. 
Voici les etapes que nous detaillerons : 

■ Comment preparer le document HTML? 

■ Comment I'inserer a I'aide du cObject TEMPLATE ? 

■ Comment faire reference a certaines zones du gabarit ? 

■ Comment afficher le contenu dynamique dans le frontend ? 

■ Comment utiliser les bibliotheques de code ? 
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Le gabarit HTML 

Le gabarit HTML est cree a I'aide de n'importe quel editeur HTML ou editeur de texte. Dans 
notre premier exemple, nous allons implementer le site pour la zone « B2C» basee sur un 
gabarit HTML. Pour ce faire, nous utilisons une presentation avec des tables, sans recourir au 
cadre, ce qui correspond au gabarit graphique de la figure 5.51. La mise en page complete 
du site, comprenant les zones de fonction et de contenu, est alors concue pour donner au 
developpeur TypoScript des instructions claires pour I'etape d'implementation. 

A I'etape suivante, definissez les zones dont le contenu ou les fonctionnalites doivent etre 
remplaeees dynamiquement par TYP03. Cela comprend les menus, les boutons, les zones de 
texte parametrables et la zone de contenu. 

Pour que TYP03 puisse identifier ces zones, placez des balises specifiques dans le gabarit HTML. 
Deux types de balises specifiques sont prevuesa cet effet : les sous-parties (subparts en anglais) 
et les marqueurs (markers en anglais). 



Les sous-parties 

■ Les sous-parties (subparts) sont toujours utilisees par deux et renferment les sections du 
gabarit HTML qui sont completement remplaeees par le resultat de la configuration TypoS- 
cript. 

■ Le nom de la sous-partie est entoure par ### et est sensible a la casse. 

■ Les sous-parties peuvent etre entourees de commentaires HTML. 

■ Avant que les objets de contenu des sous-parties soient generes, toutes les sous-parties du 
tableau sont chargees dans le registre pour que vous puissiez y acceder si necessaire. 

Exemple : 

< ! --###CONTENT### start --> 
< ! --###CONTENT### stop --> 



Les marqueurs 

■ Les marqueurs sont uniquement utilises seuls (jamais par paires) et sont remplaces par le 
resultat de la configuration TypoScript. 

■ Le nom du marqueur est entoure par ### et est sensible a la casse. 

■ Les marqueurs ne peuvent pas etre a I'interieur des commentaires HTML puisque ceux-ci ne 
sont pas supprimes. 

Exemple : 

###COPYRIGHT### 
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Preparation du gabarit HTML 

Puisque les en-tetes HTML et les balises <body> sont generalement crees par TYP03 depuis le 
frontend, seule la partie du gabarit HTML situee entre les balises <body> doit etre utilisee. Les 
balises des sous-parties sont inserees dans le code HTML dans ee but. 

<body> 

<!--###DOCUMENT_BODY### start --> 

<!--###DOCUMENT_BODY### stop --> 

</body> 



Preparez le gabarit HTML de telle maniere que tous les chemins d'image fassent reference aux 
repertoires du systeme de fiehiers dans lesquels ils sont enregistres, et que la reference soit 
relative au repertoire racine. lis devraient aussi etre accessibles a partir du module Fichier 
— > Fiehiers (par exemple fileadmin/images/. ..). Cela signifie que si vous placez le fichier 
HTML dans le repertoire racine du site Web et que vous y accedez, les images emboitees se- 
ront visibles. Vous pouvez par consequent acceder egalement a clear.gif qui se trouve dans le 
repertoire racine. 



Figure 5.54: 
Gabarit HTML appele 
via le repertoire 
racine 



logos 



Preparee de cette faeon, I'esquisse HTML pour le gabarit apparaTt a present comme suit (en 
abrege). Ici, les elements de contenu a substituer ont ete supprimes, pour rendre plus facile la 
lecture du document. A I'exception du marqueur ###COPYRIGHT###, seules des sous-parties 
ont ete utilisees. 

<!DOCTYPE HTML PUBLIC " -/ /W3C/ /DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<title>Untitled</ title> 

<link rel= " stylesheet " type= " text/ess " href = " f ileadmin/styles/def aults 
tylesheet-angepasst . ess "> 
</head> 
<body> 

<!--###DOCUMENT_BODY### start --> 

<table width="800" border="0" cellspacings " 0 " cellpadding= " 0 " > 
<tr> 

</tr> 
<tr> 

<td>  </td> 

<td height-"32" colspan-"5" align-"left" valign- "middle " > 

<table widths "785" border="0" cellspacing= " 0 " cellpadding= " 0 " > 
<tr> 
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<td width-"6B0" align-"left" valign- "middle " > 
<!--###ROOTLINE### start -->Menu Rootline 
<!--###ROOTLINE### stop --></td> 
<td width-"13B" align-"right" valign- "middle " > 

<!--###PRINTVERSION### start -->Version Impression 
<!--###PRINTVERSION### stop --></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 

</tr> 
<tr> 

<td width- " IB " ximg src- " clear . gif " width-"l" height-"l" alt-"" border- " 0 " ></td> 
<td width-"l" bgcolor- " #CCCCCC " background- " f ileadmin/images/layout / lpx_gray . gif 

"ximg src- " clear . gif " width-"l" height-"l" alt-"" border-"0"></ 

td> 

<td width-"197" colspan-"2" align-"left" valign- "middle " ximg src- " f ileadmin/ima 
ges/layout/logo . gif " widths "177" height="82" alt="" border="0"x 
/td> 

<td width-"B86" align- " right " > 

<!--###HEADER_IMAGE### start -->En-tete 
<!--###HEADER_IMAGE### stop --></td> 
<td bgcolor- " #CCCCCC " background- " f ileadmin/images/layout / lpx_gray . gif " width-"l 
"ximg src- " clear . gif " width-"l" height-"l" alt-"" border- " 0 " ></td> 
</tr> 
<tr> 

</tr> 
<tr> 

< td> &nbsp ; < / td> 

<td colspan-"3" height- " 40 " ximg src- " f ileadmin/images/layout /balken_gelb . gif " w 
idth="166" height="18" alt="" border= " 0 " x / td> 
<td colspan-"2" height-" 40 "> 

<!--###NAVIGATION### start -->Navigation principale 
<!--###NAVIGATION### stop --></td> 
</tr> 
<tr> 

< td>&nbsp ; < / td> 

<td bgcolor="#CCCCCC" background^ " f ileadmin/images/layout / lpx_gray . gif " ximg src 
-"clear.gif" width-"l" height-"l" alt-"" border- " 0 " x / td> 
<td align- "left" valign-" top "> 

<!--###LEFT### start -->Navigation seoondaire 

<!--###LEFT### stop --></td> 

< td> &nbsp ; < / td> 

<td aligns "left" valign= " top " > 

<!--###CONTENT### start -->Contenu 
<! — ###CONTENT### stop --></td> 
<td width-"l"ximg src- " clear . gif " width-"l" height-"l" alt-"" border- " 0 " ></td> 
</tr> 
<tr> 

</tr> 
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<tr> 

<td height="18" colspan="6" aligns " right " >###COPYRIGHT###</ td> 
</tr> 
<tr> 

<td height="10" colspan="6" aligns " right " >&nbsp ; </td> 
</tr> 
</table> 

<!--###DOCUMENT_BODY### stop--> 

</body> 
</html> 

A la figure suivante, vous voyez a nouveau le gabarit sous la forme d'un diagramme sche- 
matique. Ce gabarit serf a creer une mise en page typique a base de tables, avec des fiehiers 
GIF transparents (en pointilles) en tant que balises specifiques. Les zones avec des sous-parties 
sont marquees par des lignes brisees. 



Figure 5.55: 
Diagramme 
sehematique des 
zones du gabarit 
HTML 
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Dans cet exemple, de nombreuses sous-parties et marqueurs ont ete inseres, de sorte que 
seule la mise en page de base demeure. Cela eree des zones de contenu qui peuvent toujours 
etre structures en utilisant TypoScript. L'avantage est que vous pouvez alors changer I'appa- 
rence des zones dynamiques a n'importe quel moment via les objets TypoScript, et que - dans 
nos exemples - nous pouvons recourir a differentes bibliotheques de code pour nos besoins 
d'illustration. 

Le gabarit HTML doit desormais etre enregistre dans le systeme de fiehiers de I'application 
TYP03, dans un repertoire sous fileadmin/. . . . S'il est place dans le dossier racine, les references 
des images ne fonctionneront plus ; mais puisque le gabarit HTML est affiche avec index.php 
dans le frontend a partir du repertoire racine du site Web, les references fonctionneront. 



Creation de l'enregistrement de gabarit 

Comme nous I'avons deja mentionne, nous utilisons des gabarits en cascade dans les exemples, 
que nous insererons a partir d'un gabarit racine. 

Dans le repertoire du systeme Gabarits/Gabarits principaux/ , creez un nouvel enregistrement 
de gabarit, html template, et inserez-le dans le gabarit racine de la page « B2C Accueil » 
(B2C main template) en tant que gabarit de base, html template represente la definition 
effective du gabarit de la page. Ce dernier comprend le gabarit content (default) et integre 
aussi certaines bibliotheques de code sous forme de gabarits de base. 



276 



5.9 Creation de gabarits TypoScript 



CURRENT TEMPLATE: 



>pl B2C main template • (B2C) B2C main template V 



Figure 5.56: 




Emboitement futur 
des gabarits TS dans 
le Template Analyzer 



Dans le champ Setup du gabarit TS html template, le TLO page est defini comme une page 
en I'assignant au type d'objet PAGE; ce que nous avons deja presente a la section 5.2. Nous 
assignons la valeur 0 a la propriete typeNum. Puisque notre site n'est pas base sur des cadres, 
cette assignation est suffisante. 

page = PAGE 
page . typeNum = 0 

D'autres proprietes comme bodyTagMargins et noLinkUnderline specifient que I'affichage 
de la balise <body> generee par TYP03 se fait avec les parametres leftmargin="0", topmar- 
gin="0", marginwidth="0", margin-height="0", et que les liens crees dans le contenu ne sont 
pas soulignes. 

page . bodyTagMargins = 0 
page . noLinkUnderline = 0 

Si maintenant vous appelez une page a partir du site « B2C », vous verrez que le gabarit TS 
fonctionne. Mors que rien n'est encore affiche, les parametres corrects ont ete assignes a la 
balise <body> dans le texte source. 

cObject TEMPLATE 

A present, pour inserer le gabarit HTML, utilisez le type d'objet PAGE qui reprend les objets de 
contenu dans une liste numerique (un tableau). La ligne page. 10=TEM PLATE definit un objet 
de type TEMPLATE dans le chemin d'objet page.10. La propriete template que I'objet page.10 
a desormais acquise est alors definie comme un objet de type FILE et a travers la propriete file, 
cet objet fait reference au gabarit HTML dans le systeme de fichiers. 

page.10 = TEMPLATE 
page .10 { 

template = FILE 

template . file = f ileadmin/ templates/html_template . tmpl 



} 
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Avec ce code, le gabarit HTML est deja affiche dans le frontend, mais les sous-parties et les 
marqueurs ne sont pas encore remplaces. 

A ce stade, c'est une bonne idee de reconstruire la definition de I'objet TEMPLATE pour confi- 
gurer les proprietes du type d'objet TEMPLATE, par exemple en ouvrant le champ TS Setup avec 
le module Web — > Gabarit — > Info/Modify et en utilisant I'assistant TypoScript presente a la 
section 5.4.2. II est clair que la propriete template peut prendre un cObject comme argument. 



Remplacement des sous-parties et des marqueurs 

Definissez d'abord la zone du gabarit HTML a utiliser pour I'affichage TYP03. Etant donne 
que TYP03 cree ses propres en-tetes et balises <body>, il s'agit de la sous-partie ###DOC- 
UMENT_BODY### situee a I'interieur de la balise <body> dans le gabarit HTML. Celle-ci 
delimite la zone du gabarit a interpreter pour le remplacement des sous-parties et des mar- 
queurs a remplacer. Vous y faites reference avec la propriete workOnSubpart et le nom de la 
sous-partie DOCUMENT_BODY selectionnee comme valeur. Les proprietes subparts et marks 
de I'objet page. 10 representent des listes de cObjects avec les noms des sous-parties et mar- 
queurs correspondants. Pour tester si les balises specifiques donnees sont correctement refe- 
rencees, elles sont definies ci-dessous en tant qu'objets de type TEXT et chacune d'elles recoit 
un texte a afficher comme valeur. 



page. 10 = TEMPLATE 
page. 10 { 

template = FILE 

template . file = f ileadmin/templates/html_template . tmpl 
workOnSubpart = DOCUMENT_BODY 

Subparts . HEADER IMAGE = TEXT 

subparts . HEADER_IMAGE . value = zone pour 1 ' image d'en-tete 
Subparts . ROOTLINE = TEXT 

subparts . ROOTLINE . value = Menu rootline 
subparts . PRINTVERSION = TEXT 

subparts . PRINTVERSION. value = bouton d' impression 
subparts. CONTENT = TEXT 

subparts . CONTENT . value = zone de contenu 
subparts . NAVIGATION = TEXT 

subparts .NAVIGATION. value = zone de navigation principale 
subparts. LEFT = TEXT 

subparts . LEFT . value = zone de navigation secondaire et de metas (p. ex. informat 
ion legale) 

marks . COPYRIGHT = TEXT 

marks . COPYRIGHT . value = bas de page avec copyright 



Si une page du site « B2C » est appelee a ce moment dans le frontend, vous voyez que les 
sous-parties et les marqueurs ont ete remplaces par le texte correspondant. 
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Insertion de contenu dynamique 

A present, le contenu des pages respectives devrait bien sur etre affiehe. Puisque content 
(default) et styles.content (default) ont ete inseres en tant que gabarits de base dans le 
gabarit TS html template, cela devient simple car des cet instant, I'objet styles.content.get est 
disponible. 

Extrait de styles.content (default) : 

styles.content.get = CONTENT 
styles.content.get { 

table = tt_content 

select . orderBy = sorting 

select. where = colPos=0 

select . languageField = sys_language_uid 

} 

Les elements de contenu dans la colonne Normal (colPos=0) de la table tt_content sont 
selectionnes et restitues avec le gabarit standard content (default) a I'aide de I'objet styles, 
content.get, car une configuration TS correspondante y est definie pour chaque type de 
contenu. La configuration est situee sous tt_content* et, puisque les noms sont identiques, 
die est utilisee automatiquement par I'objet CONTENT pour restituer la table tt_content. 

A present, I'objet styles.content.get est aussi copie dans page.lO.subparts.CONTENT : les 
elements de contenu de la colonne Normal de la page courante sont restitues et inseres dans 
les sous-parties sous le nom CONTENT. Le contenu a afficher est mis dans un tableau via la 
propriete wrap du type d'objet CONTENT. 

page. 10 { 

subparts . CONTENT < styles.content.get 

subparts . CONTENT. wrap =<table width="586" cellspacing= " 0 " cellpadding= " 0 " border 
= "0"><trxtd> | </tdx/trx/table> 

} 

Notez que CONTENT dans le chemin d'objet page.lO.subparts.CONTENT n'est que le nom de 
la balise de la sous-partie dans le gabarit HTML; ceci ne signifie pas forcement que e'est un 
objet de type CONTENT. Mais en realite, page.lO.subparts.CONTENT est defini com me un objet 
CONTENT avec une copie de I'objet styles.content.get. 
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Les pages de I'application « B2C» restituent desormais le contenu de la page courante dans 
le frontend. 

Figure 5 58' Menurootline bouton d'imprcsnon 
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bar de page avec copyright 



Pour mettre en forme I'affichage du contenu, les gabarits standards cSet (default) et cSet 
Stylesheet simplifient le marquage a I'aide du Constant Editor. Tous les deux definissent les 
styles dans styles.content.default a I'aide de constantes, ce qui facilite les changements a un 
niveau global. La difference entre les deux est que cSet (default) s'acquitte du marquage en 
utilisant la mise en forme HTML traditionnelle, alors que cSet Stylesheet utilise des definitions 
de feuilles de style en cascade qui sont enregistrees dans un fichier separe. Selon la methode 
que vous preferez, integrez le gabarit standard approprie comme gabarit de base apres content 
(default) dans le gabarit TS html template. Nousavonsillustre cesdeuxpossibilit.es tour a tour. 

cSet (default) 

Si cSet (default) est insere, vous pouvez changer les valeurs par defaut avec le Constant 
Editor. Dans I'exemple, les valeurs standards de la categorie CSET comme la couleur de 
I'arriere-plan, les polices de caractere et les tailles des differents elements de contenu, 
ainsi que les en-tetes, sont tous remplaces. 

#angepasste Konstanten des Standard-Templates cSet (default) 

cSet.pageColor = white 

cSet.tableCellColor = #E6B800 

cSet. color = #666666 

cSet.colorl = #0000CC 

cSet.color2 = #E6B800 

cSet . f ontFace = Arial 
cSet . f ontFace . text = Arial 

cSet.sizel = 1 
cSet.size2 = 2 
cSet.size3 = 3 

Les changements sont sauves par le Constant Editor dans le champ Constant du gabarit 
selectionne. 
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cSet Stylesheet 

Ce gabarit standard se base sur la feuille de style media/scripts/default-stylesheet.css 
fournie dans I'insta Nation de base de TYP03. Copiez ee fichier et enregistrez-le dans un 
repertoire du systeme de fichiers sous fileadmin/. Speeifiez ensuite le nouveau chemin 
dans la categorie CONTENT du Constant Editor. 



Category: | CONTENT (62) _J 



Figure 5.59: 
Insertion du nouveau 
fiehier CSS 



Style sheet [content, sty lesheet.file] 

The default stylesheet is media/scripts/defaultstylesheet. ess, Make a copy of this file, 

ed it the copy and upload it as resource here! 

W I fileadmin/ styles/ def a ultstyle sheet- modified, ess ^~| ^eS~ 

I 

Default: media/scripts/defaultstylesheet, ess 



La nouvelle valeur de la constante est ecrite dans le champ Constants du gabarit TS : 

# constante de la feuille de style pour le gabarit standard cSet 

content . stylesheet . file = f ileadmin/styles/def aultstylesheet-modif ied. ess 

Vous pouvez a present modifier les styles dans le fichier CSS ou en ajouter de nou- 
veaux. Les modifications peuvent etre effectuees soit avec un editeur CSS special, soit 
directement avec TYP03 (Fichier — > Fichiers). 

Etapes de construction avec des gabarits en cascade 

Le gabarit TS insere le gabarit HTML et affiche les elements de contenu mis a jour par les 
redacteurs dans le backend. Toutefois, il contient encore des marqueurs specifiques qui ne 
contiennent jusqu'a present que du texte pour les tests. Ces balises seront remplacees par des 
bibliotheques de code et inserees en tant que gabarits de base. Nous discuterons des menus 
ulterieurement, dans le chapitre qui leur est consacre. 



L'image de l'en-tete 

Tout d'abord, il faut ajouter une image a la sous-partie HEADER qui, selon les zones de I'ar- 
borescence des pages, est specifiee par les redacteurs via le champ Fichiers des pages corres- 
pondantes. Pour ce faire, un gabarit TS particulier, temp.headerjitml, est cree. II definit I'objet 
temporaire header_image du type d'objet IMAGE. 

temp.header_image = IMAGE 

Afin de specifier I'endroit a partir duquel les images sont lues, utilisez la propriete file.import 
qui specifie le repertoire ou les images sont stockees via le champ Fichiers. La propriete file 
appartient au type de donnees imgResource. Cette propriete est a son tour une fonction qui 
contient la propriete import. 
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temp . header_image . file . import = uploads/media/ 

Nousavons maintenant precise le dossier dans lequel les images sont situees, mais pas I'endroit 
oil elles doivent etre affichees. La propriete import appartient au type de donnees path, mais 
la fonction stdWrap est disponible, et done la propriete data du type de donnees getText 
Test aussi. Ceci permet d'afficher les valeurs des donnees enregistrees de maniere interne par 
TYP03 (tableau PHP), y eompris les images assignees aux pages. Ainsi, data = levelmedia:1, 
slide affiche les donnees du type levelmedia du premier niveau dans I'arborescence des pages. 
Grace au parametre slide, TYP03 parcourt I'arborescence des pages a partir de la page courante 
de niveau 1 , jusqu'a ce qu'il trouve une image et I'affiche. 

temp . header_image . file . import . data = levelmedia : 1 , slide 

Nous regarderons de plus pres la fonction stdWrap, mais nous avons vu ici combien el le est 
puissante rien qu'en affichant des donnees. Le point important ici est que si vous avez travaille 
sur les exemples avec nous, vous aurez deja eompris quelque peu la manipulation de TSref (cf. 
figure 5.62). 

II ne vous reste plus qu'a inserer les images preparees dans les en-tetes de pages respectifs 
(type de page : Advanced) du premier niveau via le champ Fichiers. 



Figure 5.60: 
Fichier d'image insere 
dans I'en-tete de 
page 



Dans le gabarit TS html template, le chemin d'objet temp.header_image est assigne a la sous- 
partie HEADERJMAGE. 



subparts . HEADER_IMAGE < temp . header_image 



De nombreuses images sont affichees, selon I'endroit de I'arborescence, dans I'en-tete de I'ap- 
plication du frontend via ces trois lignes de code TypoScript. 



Figure 5.61: 
Resultat dans le 
frontend 




Le texte dans le pied de page 

Dans le bas de page de I'application, la note de copyright est inseree sous forme de texte qui 
peut etre edite. Un autre gabarit TS est aussi cree ici (temp.copyright_html) et est insere en 
tant que gabarit de base dans I'enregistrement de gabarit html template. 

marks . COPYRIGHT < temp . copyright_html 
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Figure 5.62 : 
Lecture du TSref 
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La partie de code temp.copyright_html genere un objet du meme nom et du type d'objetTEXT. 
Sa propriete value recoit comme valeur une constante et le resultat de I'objet est enveloppe 
d'une balise HTML <font>. 

temp . copyright_html = TEXT 
temp . copyright_html { 
value = {$copyright} 

wrap = <font face- "Arial , Helvetica , sans-serif , sans-serif " size-"l" color-" #66666 
6" class=" copyright "> | </font> 
} 

II faut maintenant assigner une valeur a la constante dans le champ Constants du gabarit TS : 

copyright = Copyright kcopy; 2005 

Ce texte est affiche dans le frontend a la fin de la page. 



Figure 5.63: 
Le gabarit TS html 
template : seuls les 
menus et la fonction 
d'impression 
manquent 
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II n'est pas obligatoire d'utiliser la constante copyright, mais vous devriez pouvoir changer le 
sigle copyright en utilisant la valeur d'une constante. 

L'application est encore etendue aux sections 5.10 et 5.1 1. 

5.9.2 Le Template Auto-Parser 

Reference 543497 L'utilisation du Template Auto-Parser est illustree a I'aide de la zone « B2E » du site Web. El le 
est similaire a Integration de gabarits HTML, sauf que insertion des sous-parties et des mar- 
queurs ainsi que les chemins des images et des ressources sont pris en charge par I'extension 
Template Auto-Parser (automaketemplate). Celle-ci doit deja etre prealablement chargee et 
installee. Vous devriez aussi installer I'extension CSS styled content (css_styled_content) qui 
sera utilisee a la place du gabarit standard content (default). 
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Le gabarit HTML 

Afin d'apporter quelques modifications a I'application, la mise en page du gabarit HTML dans Reference 544119 
la zone « B2E » n'est plus basee sur des tables, mais est marquee a I'aide de balises <div> dont 
I'apparenee est entierement definie par des feuilles de style en cascade (CSS) 8 . Ces quelques 
balises <div> peuvent aussi etre creees avec TypoScript, comme nous le montrons a la sec- 
tion 5.9.3. L'Auto-Parser reconnaTt les zones s'il trouve le parametre id dans des elements HTML 
tels que <div>, <span> et <td>. Le gabarit HTML a ete prepare en consequence et enregistre 
dans le systeme de fichiers. Si elles sont incluses dans le code HTML, les images et les autres 
ressources devraient etre stockees dans des sous-repertoires relatifs correspondants. Les che- 
mins vers les fichiers externes, comme les images, ne doivent pas etre ajustes dans le gabarit 
HTML. 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional / /EN" > 

<html> 

<head> 

<title>Untitled</title> 

<link href-" f ileadmin/styles/auto-parser-template . ess " rel- " stylesheet " ty 
pe= " text/ess " > 
</head> 
<body> 

<di v id= " root line">rootline</ div> 
<div id-" header "> 

<div id="logo">logo</div> 

<di v id= "headerimagetext " >texteimageentete< /div> 

</div> 

<div id="navi">navi</div> 
<div id- "middle "> 

<div id="subnavigation">sousnavi</div> 

<div id= "content " >contenu< /div> 
</div> 

<div id="printversion">versionimpression</div> 

<div id- " footer " ></div> 

<div id="oopyright">Copyright © 2005</div> 

</body> 

</html> 



Configuration du Template Auto-Parser 

La hierarchie du gabarit est identique a eel le de la zone « B2C». Un gabarit de base, auto 
parser template, est assigne au gabarit racine B2E main template qui est associe a la page 
racine du site « B2E ». Ce dernier gabarit contient le gabarit standard CSS styled content pour 
la restitution des elements de contenu, via Include static (from extensions). 

Lorsque vous avez installe I'extension Template Auto-Parser, vous voyez apparaitre un nouvel 
objet, tx_automaketemplate_pi1 de type USER sous le TLO plugin. 



Bien sur, I'efficacite de cette methode ne devient apparente qu'avee des gabarits HTML plus complexes. 



285 



5 TypoScript 



Figure 5.64: 
/.'extension Template 
Auto-Parser dans 
TObjeet Browser 



CURRENT TEMPLATE: 
►B flgj main template 



Browse: | Setup T] OL: | ALL 



Ep~[config] 
£)-.[includeLibs] 
□...[plugin] 

□ [tx_a uto m a k ete m p I ate_p i 1 ] = U S E R 

I [userFun c] = tx_au tomaketemplate_pi 1 - >main 
g...[content]=FILE 
«. .[elements] 
|+J [tx_rlmpofficeimport_pil] = USER 

m-tlib] 



Reference 363442 Cela permet de faire appel au Template Auto-Parser et de le configurer. Les options possibles 
se trouvent dans la documentation de I'extension (voir la reference). Ajoutez le code suivant 
au champ Setup du gabarit TS auto parser template : 



### Configuration du Template Auto-Parser : ### 
plugin. tx_automaketemplate_pil { 
content = FILE 

content. file = fileadmin/ templates/auto-parser- template . tmpl 
elements { 

BODY. all = 1 

BODY. all . subpartMarker = DOCUMENT_BODY 
HEAD. all = 1 

HEAD. all. subpartMarker = DOCUMENT_HEADER 
HEAD.rmTagSections = title 
DIV.all = 1 

} 

} 



La propriete content permet de choisir le gabarit HTML a utiliser dans le Template Auto-Parser. 
On donne ensuite I'instruction d'inserer les marques des sous-parties pour les balises <body>, 
<head> et <div>. Un subpartMarker (en majuscules) est configure dans tous les elements 
HTML de type <body> et <head>, de telle maniere qu'ils soient reconnus par la suite par le 
cObject TEMPLATE. Puisque la section titre de la page est generee dynamiquement par TYP03, 
la balise <title> est supprimee avec elements.HEAD.rmTagSections=title. S'il vous faut ajuster 
les chemins relatifs des images et des ressources du gabarit HTML a I'environnement TYP03 a 
partir du repertoire racine, specifiez un prefixe devant le dossier du systeme de fichiers. Nous 
ne I'avons pas fait dans I'exemple etant donne que seul le fichier CSS est implique, car la 
reference pointe deja vers le bon repertoire. 



#Ajoutez le prefixe suivant a tous les chemins relatifs : 

plugin. tx_automaketemplate_pil . relPathPref ix = f ileadmin/template/ 
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Creation de la page 

Pour creer la page, le code TypoScript est construit de maniere plus modulaire en creant desob- 
jets dans le chemin d'objet temp*. L'objet headerTemplate du type d'objet TEMPLATE est cree 
pour integrer les donnees de I'en-tete HTML. Sa propriete template recoit comme reference 
l'objet plugin.tx_automaketemplate_pi1. 

La propriete workOnSubpart specifie que l'objet fait seulement reference a la zone du gabarit 
HTML qui a ete entouree par la balise specifique DOCUMENT_HEADER. 

### cObject pour l'en-tete ### 
temp. headerTemplate = TEMPLATE 
temp . headerTemplate { 

template =< plugin. tx_automaketemplate_pil 

workOnSubpart = DOCUMENT_HEADER 

} 

Dans I'exemple precedent, un fichier HTML contenant deja des balises specifiques a ete lu par 
un objet du type FILE et est passe a l'objet TEMPLATE pour le traitement. La faeon de proceder 
avec le Template Auto-Parser est identique, a ceci pres que le plugin plugin.tx_automaketem- 
plate_pi1 configure les balises specifiques automatiquement grace a la configuration et qu'il 
ajuste egalement les references auxfichiers dans le processus. Vouspouvez done assigner un id 
aux blocs du fichier HTML et y acceder dans la configuration TS, sans devoir inserer les balises 
specifiques a la main. 

L'objet mainTemplate est cree de la meme maniere, excepte qu'il fait reference a la zone du 
gabarit HTML entouree par la balise specifique DOCUMENT_BODY. Des sous-parties sont a 
nouveau fournies avec le texte affiche en guise de test. On fait reference aux sous-parties 
grace aux noms des id (observez le changement de casse) du gabarit HTML. 

### cObject pour le corps de la page {body) ### 
temp. mainTemplate = TEMPLATE 
temp .mainTemplate { 

template =< plugin. tx_automaketemplate_pil 

workOnSubpart = DOCUMENT_BODY 

subparts. rootline = TEXT 

subparts . rootline .value = Menu rootline 
subparts . printversion = TEXT 

subparts . printversion . value = bouton impression 
subparts .header = TEXT 

subparts . header . value - zone pour 1 ' image d'en-tete 
subparts .navi = TEXT 

subparts .navi .value = zone pour la navigation principale 
subparts . subnavigation = TEXT 

subparts . subnavigation. value = zone de navigation secondaire et de metas (p. ex. 
information legale) 
subparts . content = TEXT 

subparts . content . value = zone de contenu 
subparts . copyright = TEXT 

subparts . copyright .value = bas de page avec copyright 

} 

Les pages creees dans la phase finale, ainsi que les objets temporaires, sont copies dans les 
chemins d'objet page.headerData.10 et page.10. 
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## Creation de la page ### 
page = PAGE 
page . typeNum = 0 
page.noLinkUnderline = 0 

page . headerData . 10 < temp . headerTemplate 
page. 10 < temp.mainTemplate 



Lorsque vous affichez le frontend a ce stack, vous obtenez deja la disposition de base controlee 
par CSS et les sous-parties eorrespondantes avec leurs elements de contenu de test. 



Figure 5.65: 
L'affichage dans le 
frontend a ce stade 
de la construction 




mm uuur \i mvm.iliuri pumuimIv 
rrtri*. zonede contenu 



bas de psqc avec copynfH 



Si vous regardez le code source de I'affichage dans le frontend, vous voyez que le lien vers 
le fichier CSS situe dans I'en-tete reste intact, et qu'un certain nombre de balises specifiques 
pour les sous-parties s'y trouvent toujours. 



Figure 5.66: </ne«d> 

Vbndy bgi-iilur- M tfFFFFFF , *> 

Parties du resultat 

<div id-"coocline">-Henu coocline</div> 
dans le texte Source «u» ld="headei:">zone pour 1' image d' en-tete</dlv> 

<diy id-"navi"> cone pour lo noviaation pnncipalc</div> 
<di« tf»«Wddto*x» 1 §MmtiUnttU Mpia —> 

<di» id="suc.navigation">sone ae navigation secondaire et de aetae (p. ex. mrormacion legale) </div> 

<div id-"content">zone de contenu</div> 
</-- lW»J«2ddj»if#l> end — x/«x»> 
<div id-"printver3ion">bo«ton iiupres3ion</diY> 

«u» i««"roocer"><.' — #*#rooeer#ff# hegin — .« .'— *#«ootei*Wf end — -</dlY> 
<di» id-"copvridht">boo do poac ovee copyriaht</dir> 

</Boay> 
</html> 



Si vous desirez que des marqueurs soient creees uniquement pour certains id, configurez le 
Template Auto-Parser en consequence. 

plugin. tx_automaketemplate_pil . DIV. id { 
rootline = 1 
printimpression = 1 

copyright = 1 

} 

Etapes de construction avec des gabarits en cascade 

Jusqu'a present, nous n'avons affiche que du texte d'exemple avec ce gabarit. Ci-apres, des 
objets TS seront developpes pour des zones specifiques, affichant le contenu approprie qui 
peut etre incorpore au gabarit principal. 
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Affichage du contenu de la page 

La colonne de contenu Normal a deja ete affichee avec le gabarit standard content (default) 
(via I'objet predefini styles.content.get). Le gabarit standard CSS styled content utilise dans 
ce gabarit contient le meme objet et peut etre aussi utilise ici. 

temp.mainTemplate = TEMPLATE 
temp.mainTemplate { 

subparts. content < styles.content.get 

} 

Creation de l'en-tete 

Contrairement a I'exemple de la section 58, le logo n'est pas contenu dans ce gabarit HTML. 
Nousdevons le definir en utilisant TypoScript et I'image dans l'en-tete. C'est pourquoi un objet 
nomme temp.header_tswrap_autoparser du type d'objet COA a ete cree dans le gabarit. 

Le cObject COA (aussi appele COBJ_ARRAY) peut contenir plusieurs objets dans une liste. Ainsi, 
I'objet 10 genere une image (type d'objet : IMAGE) localisee dans le systeme de fichiers via la 
propriete file. 

temp.header_tswrap_autoparser = COA 
temp.header_tswrap_autoparser { 
10 = IMAGE 

10. file = f ileadmin/images/layout/logo . gif 

Le logo devrait contenir un lien vers la page d'accueil du site Web. Pour ce faire, utilisez la 
fonction stdWrap que fournit le type d'objet IMAGE comme propriete. 

E I le integre la fonction typolink qui determine (par la propriete parameter) a partir de quelles 
donnees le lien doit etre cree. Le lien mene ici a la page dont I'lD est 75. 

10 . stdWrap. typolink. parameter = 75 

La propriete parameter est du type de donnees string/stdWrap. Une autre facon de proceder 
est de determiner automatiquement I'lD de la page racine du site Web (level=0) grace a la 
propriete data de la fonction stdWrap. 

10 . stdWrap . typolink. parameter . data = leveluid:0 

L'image et le lien sont ensuite entoures d'une balise <div> par la propriete wrap de I'objet 
stdWrap, balise qui specifie la position du logo par CSS. 

10 . stdWrap. wrap = <div id-"logo"> | </div> 

20 est le second objet du COA cree par la copie de I'objet deja existant temp.header_image 
dans ce chemin d'objet. temp.header_image provient du gabarit TS temp.header_html de 
I'exemple de la section 58 et est simplement reutilise. 
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Pour ce faire, incluez ce gabarit dans I'enregistrement auto parser template en tant que ga- 
barit de base. En outre, vous devez selectionner les images desirees dans les pages eorrespon- 
dantesdu premier niveau via le champ Fiehiers. 

Puisque I'application se base sur CSS, I'objet est enveloppe d'une balise <div>. 

# image simple sans GIFBUILDER 
2 0 < temp.header_image 

20. wrap = <div id= "headerimage " > | </div> 

} 

Le texte dans le pied de page 

Afin d'afficher le copyright au bas de la page en utilisant le gabarit TS temp.copyright_html, 
incluez-le en tant que gabarit de base et copiez I'objet dans temp.mainTemplate.subparts.co- 
pyright. La seule difference est que le texte ne doit pas etre enveloppe par une balise <font>. 
Pour cette raison, la propriete wrap est supprimee a I'aide de I'operateur >. 

temp .mainTemplate = TEMPLATE 
temp.mainTemplate { 

subparts . copyright < temp . copyr ight_html 
subparts . copyright .wrap > 

} 

Le gabarit a maintenant atteint le meme niveau de developpement que dans I'exemple pre- 
cedent. La creation des menus et des fonctions speciales sera decrite plus tard. Avant cela, 
nous vous montrons a la section suivante comment construire des mises en page de base sans 
fichier HTML externe. 

Reference 591605 Si vous appreciez de travailler avec le Template Auto-Parser, nous vous renvoyons une nouvelle 
fois au « Modern Template Building, Part 1 », un didacticiel tres complet (voir la reference ci- 
contre). 

5.9.3 Gabarits TypoScript purs 

Dans la derniere methode de creation de gabarits TS que nous presentons ici, nous creerons 
un gabarit de base entierement avec TypoScript, sans avoir recours a des gabarits HTML. 

Nous vous montrerons deux exemples utilisant la mise en page de I'application « B2B », I'un 
avec le concept d'enveloppe et avec des balises <div>, I'autre avec le cObject CTABLE. Les 
gabarits sont mis en cascade de la meme maniere que pour les applications « B2C» et « B2E». 
Un gabarit de base, ts wrap template ou ts CTABLE template, est assigne au gabarit racine B2B 
main template. Definissez la page racine et integrez les gabarits standards content (default) 
et cSet stylesheet, de meme que d'autres composantes de code TS au fur et a mesure des 
explications. 

Travailler avec wrap 

Si nous nous referons a I'exemple du Template Auto-Parser, le gabarit HTML qui y est integre 
peut etre cree entierement avec TypoScript. Si vous procedez ainsi, lors de I'analyse syntaxique, 
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aucun fichier HTMLexterne contenant des balises speeifiques n'est utilise. Le rem placement des 
sous-parties et des marqueurs n'est pas necessaire puisque tous les marquages HTML requis 
sont definis dans le gabarit TS. 

Dans le gabarit TS ts wrap template, creez un TLO page du type d'objet PAGE et specifiez 
I'apparence de la balise <body> ainsi que I'emplacement du fichier CSS dans le systeme de 
fichiers avec les proprietes bodytag et stylesheets. 

Pour tous les elements de contenu de la page, creez les elements pertinents via une liste 
numerique, et entourez-les de balises <div> par la propriete wrap. L'apparence du site est 
aussi controlee par des feuilles de style en cascade (CSS). 

page { 

10 = TEXT 

10. value = Menu rootline 

10. wrap = <div id= " rootline "> | </div> 

} 

Les composantes de code reutilisable deja creees dans les gabarits TS temp.header_tswrap_ 
autoparser et temp.copyright_html sont incluses dans I'enregistrement de gabarit avec le 
champ Include basis template et leurs proprietes sont passees aux objets respectifs de la 
liste numerique. 

20 < temp.header_tswrap_autoparser 

20 . stdWrap . wrap = <div id= "header "> | </div> 

Jusqu'ici, seul le contenu de la colonne Normal eta it affiche. Une seconde zone de contenu 
est a present integree avec I'objet 60 qui affiche le contenu de la colonne de Droite via I'objet 
predefini styles.content.getRight du gabarit standard styles.content (default). 

60 < styles.content.getRight 

Maintenant, I'objet 60 est de type CONTENT. Afin d'entourer le contenu de balises <div>, pour 
respecter ce qui est defini dans la feuille de style CSS, nous utilisons la propriete wrap de la 
fonction stdWrap. 

60 . stdWrap. wrap = <div id= " right " xdiv id= " rightcontent " > | </div> 
<div id= " right f ooter " >&nbsp ; </divx/div> 

L'enveloppe est activee avec la fonction stdWrap, car nous devons utiliser la propriete sui- 
vante : 

60 . stdWrap . required = 1 

Si la propriete required est activee, stdWrap ne traite les autres proprietes activees que si une 
valeur est assignee a stdWrap. Le cas echeant, l'enveloppe ne s'affiche que si I'objet page.60 
de type CONTENT genere un resultat - c'est-a-dire s'il y a du contenu dans la colonne de 
droite. Dans I'affichage du frontend, une colonne de droite s'affiche via le CSS uniquement si 
le contenu existe egalement dans la colonne Droite. 

La configuration de ts wrap template dans son etape actuelle de developpement est la sui- 
vante : 
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page = PAGE 
page . typeNum = 0 

page.bodyTag = <body bgcolor- " #FFFFFF " lef tmargin- " 0 " topmargin- " 0 " marginwidth- " 0 
" > 

page . stylesheet = f ileadmin/styles/ts-template-wrap.css 

page { 

# Top 

## Menu rootline 
10 = TEXT 

10. value = Menu rootline 

10. wrap = <div id= " rootline "> | </div> 

## En-tete 

20 < temp . header_tswrap_autoparser 
20. wrap = <div id- "header "> | </div> 
## Navigation principale 
30 = TEXT 

3 0. value = zone pour la navigation principale 
30. wrap = <div id= "navi " > | </div> 

# Gauche / menu secondaire 
40 = TEXT 

40. value = zone de navigation secondaire et zone de contenu metas (p. ex. inform 
ation legale) 

40. wrap = <div id= " subnavigation" > | </div> 

# Contenu 

50 < styles . content . get 

50 . stdWrap. wrap = <div id= " content "> | </div> 

# Droite 

60 < styles . content . getRight 

60 . stdWrap .wrap = <div id-" right "xdiv id- " rightcontent " > | </divxdiv id-"rightfo 
oter ">  </divx/div> 

# la colonne de droite n'est affichee que si du contenu est defini 
60 . stdWrap . required = 1 

# Version impression 
65 = TEXT 

65. value = bouton impression 

65. wrap = <div id= "printversion" > | </div> 

# Bas de page 

## code pour permettre 1' insertion en CSS d'un retour a la ligne 
70 = TEXT 

70. value = <div id- " footer ">< /div> 
## Copyright 

80 < temp.copyright_html 

80. wrap = <div id= " copyright "> | </div> 

} 
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Travailler avec CTABLE 

De simples presentations sous forme de tableaux sont rapidement creees avec TypoScript a 
I'aide du cObject CTABLE. Ce dernier cree un tableau standard, possedant jusqu'a cinq cellules. 
Une cellule pour les elements de contenu (c) est eventuellement entouree de cellules pour la 
marge de gauche (Im), la marge de droite (rm) et les marges du haut (tm) et du bas (bm). 



Im 



bm 



rm 



Figure 5.67: 
Presentation en 
tableau avec CTABLE 



La mise en page du site de I'exemple n'est pas idea le pour la conversion avec CTABLE puis- 
qu'elle contient plusieurs lignes et plusieurs cadres. Dans le gabarit de base ts CTABLE tem- 
plate, definissez ici aussi le TLO page avec les proprietes utilisees jusqu'a maintenant, a savoir 
typeNum, bodyTag Margins et noLinkUnderline. 

page = PAGE 

page . typeNum = 0 

page . bodyTagMargins = 0 

page. noLinkUnderline = 0 



Dans cet exemple, nous avons divise la mise en page en plusieurs objets, grace a la propriete 
numerical List du type d'objet PAGE. L'objet 2 cree ensuite une table qui incorpore le menu 
rootline et le bouton pour la version d'impression. Le type d'objet CTABLE lui est assigne, 
ce qui rend toutes les proprietes des cObjects disponibles. Des parametres supplementaires 
sont actives pour la table avec les proprietes tableParams et avec offset, la distance au coin 
superieur gauche est mise a 0. 

###### rootline ####### 
page. 2 = CTABLE 
page . 2 { 

tableParams = border="0" cellpadding= " 0 " cellspacings " 0 " width="785" 
offset =0,0 



Les proprietes c, Im, rm, tm et bm sont du type de donnees CARRAY +TDParams, c'est-a-dire 
qu'elles representent une liste numerique de cObjects. Vous pouvez faire passer vos propres 
parametres dans les cellules de la table. 

La cellule de contenu c pour le futur menu rootline est definie temporairement comme un 
objet de type TEXT ; une balise specifique est definie avec sa propriete value. 

c.10 = TEXT 

c. 10. value = Menu rootline 



Le contenu de la cellule est centre : 
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c.TDParams = valign- "middle " 



Un cObject du type d'objet CLEARGIF servant a fixer la hauteur de la table a 32 pixels est 
introduit dans la cellule de gauche Im. 

# Hauteur du menu rootline 
lm.10 = CLEARGIF 

lm. 10. height = 32 

Un texte est aussi configure dans la colonne de droite rm pour le lien vers la version imprimable 
de la page. 

rm.10 = TEXT 

rm. 10. value = bouton impression 
rm.TDParams = valign- "middle " align- " right " 

} 

Les objets page. 10, page. 20, page. 30 et page. 40 sont egalement definis comme des tables. La 
cellule des elements de contenu, page. 10. c, affiche le logo et I'image dans I'en-tete de la page ; 
el le consiste en plusieurs objets se presentant sous la forme d'une liste numerique (COA). 

###### en-tete ###### 
page. 10 = CTABLE 
page. 10 { 

tableParams - border-"0" cellpadding- " 0 " cellspacing- " 0 " width- "785" 
offset = 15,0 

# Logo 
C.10 = COA 

#Table pour le le logo et I'image d' en-tete 
c.10.5 = HTML 

c. 10. 5. value = <table border="0" width="768" cellspacings " 0 " cellpadding= " 0 " xtr 
xtd width="197"> 
c.10.10 = IMAGE 

c. 10. 10. file = fileadmin/ images/ layout / logo . gif 

c . 10 . TDParams = align-"left" valign-"top" bgcolor- "white " 

c.10.15 = HTML 

c . 10 . 15 . value = </tdxtd align- " right " > 
c.10.20 < temp . header_image 
c.10.30 = HTML 

c. 10. 30. value = </tdx/trx/table> 

L'agencement des elements est implementee par les cellules page.10.lm, page.10.tm, page.10. 
rm et page.10.bm qui affichent les objets du type IMAGE. 

# Agencement de 1' en-tete 
lm.10 = IMAGE 

lm. 10. file = f ileadmin/images/layout/lpx_gray .gif 

lm. TDParams = align="left" valign="top" bgcolor= " #CCCCCC " height="125" width="l" 
tm.10 = IMAGE 

tm. 10. file = f ileadmin/images/layout/lpx_gray.gif 

tm. TDParams = align="left" valign="top" bgcolor="#CCCCCC" height="l" width="785" 
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rm.lO = IMAGE 

rm. 10. file = f ileadmin/images/layout/lpx_gray.gif 

rm . TDPar ams = aligns " left " valign="top" bgcolor^ " #CCCCCC " height="125" width="l" 
bm.lO = IMAGE 

bm. 10. file = f ileadmin/images/layout/lpx_gray . gif 

bm. TDPar ams = align= " left " valign="top" bgcolor="#CCCCCC" height="l" width="785" 

} 

page.20 affiche la navigation principale. 

###### Navigation principale ###### 
page.2 0 = CTABLE 
page.2 0 { 

tableParams = border="0" cellpadding= " 0 " cellspacing= " 0 " width="785" 
offset = 15,0 
c . 5 = HTML 

c. 5. value = <table border-"0" width-"78B" height-"40" cellspacing- " 0 " cellpaddin 
g="0"xtrxtd widths" 197 "> 
c.10 = IMAGE 

c. 10. file = f ileadmin/images/layout/balken_gelb.gif 
c . 1 0 . par ams = hspace="0" vspace="0" 
c.15 = HTML 

c. 15. value = </tdxtd> 
c.2 0 = TEXT 

c. 2 0. value = zone pour la navigation principale 

c.TDParams = align="left" valign= "middle " bgcolor =" tFFFFFF " height="40" 
c.3 0 = HTML 

c. 30. value = </tdx/trx/table> 

} 

La table page. 30 met en place le menu secondaire et la zone de contenu par le biais de 
page.30.lm et page.30.e. Ceux-ei sont entoures par les objets HTML page.25 et page.35 qui 
affiehent la ligne grise sur la page de gauche. 

###### Sous-navigation et contenu ###### 
#Ligne de droite et de gauche sous forme de table 
page.2 5 = HTML 

page . 25 . value = <table border-"0" cellspacing- " 0 " cellpadding- " 0 " xtrxtd width-" 
15"><img src- " clear . gif " width-"15" height-"l" alt-"" border-" 0"x/tdxtd width-" 
1" bgcolor="#CCCCCC" background^ " f ileadmin/images/layout /lpx_gray . gif " ximg src="c 
lear.gif" width="l" height="l" alt=" " border^ " 0 " x/tdxtd> 

page. 3 0 = CTABLE 
page .30 { 

tableParams = border="0" cellpadding^ " 0 " cellspacing= " 0 " width="767" 
offset =0,0 
c.10 = COA 
c.10.5 = HTML 

c.10. 5. value = <table border="0" cellspacings " 0 " cellpadding^ " 0 " width= " 586 " xtr> 
c.10. 10 < styles . content . get 

c.10. 10. wrap = <td align= " lef t " valign= " top " > | <br /xbr /></td> 
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c.10.25 = HTML 

c. 10. 25. value = </trx/table> 

# espace pour que la cellule soit aussi incluse si son contenu est vide 
c . 10 . stdWrap . if Empty =   

# decalage par rapport au copyright 
c.2 0 = HTML 

c. 20. value = <br /xbr /> 

c . TDParams = align- " right " valign-"top" 

lm.10 = TEXT 

lm. 10. value = zone de navigation secondaire et de metas (p. ex. information lega 
le) 

# hauteur de 40 0px, meme sans contenu 

lm. TDParams = width="197" align="left" valign="top" height="400" 

} 

#Fin de la table 
page .35 = HTML 

page. 35 .value = </tdx/trx/table> 

Le pied de la page avec le copyright est cree par I'objet table page.40. 

###### Copyright ###### 
page.40 = CTABLE 
page.40 { 

tableParams = border="0" cellpadding= " 0 " cellspacing= " 0 " width="785" 
offset =15,0 

c.10 < temp . copyright_html 

c. TDParams = align="right" valign= "middle " bgcolor= " #FFFFFF " height="18" 
tm.10 = IMAGE 

tm. 10. file = f ileadmin/images/layout/lpx_gray .gif 

tm. TDParams = align="left" valign="top" bgcolor= " #CCCCCC " height="l" width="785" 

bm.10 = CLEARGIF 
bm. 10. height = 30 

} 

Comme vous le voyez, le code TypoScript est devenu assez long : CTABLE convient mieux a des 
mises en page plus simples. 

A present, toutes les methodes de gabarit ont ete passees en revue. Celle que vous choisirez 
pour concevoir votre application dependra de vos preferences et de vos competences. Dans la 
section suivante, nous introduisons les menus qui affichent automatiquement I'arborescence 
des pages pour la navigation a travers le site. 
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Les menus ne sont pas seulement a la base du concept de navigation dans votre site Web, 
ils constituent egalement des elements de graphisme importants. Avec TYP03, vous pouvez 
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creer differents types de menus grace ail TypoSeript, pour affieher sous differentes formes la 
structure du site. Certaines fonctionnalit.es sont deja incluses pour la creation de menus bases 
sur du texte, sur des images, sur des compositions d'images, ou des menus de selection. 

Dans le frontend, les menus sont crees dynamiquement grace a I'arborescence des pages. Si, 
par exemple, vous creez une nouvelle page dans le backend, elle est automatiquement reprise 
dans le menu correspondant une fois qu'elle est mise en ligne. 

Dans les menus, les types de page affichessont generalement Standard, Avance, URL externe, 
Raccourci et Point de montage, pourvu que TypoSeript n'impose aucune restriction. La balise 
specifique Delimiteur doit etre definie separement pour etre affichee. Les types de page Hors 
menu, Dossier Systeme et Corbeille ne sont pas inclus. 



Niveaux 

Puisque normalement, seul le plan du site affiche toutes les pages d'un site Web, vous devez 
definir dans la plupart des menus les pages de debut et de fin du menu. Une maniere de les 
definir reside dans les fameux niveaux. Le rootline du site Web, en tant que premier niveau, 
correspond au niveau 0. Le niveau suivant est le niveau 1, etc. 



□ BT3-Entreprise 

| □ Portail 

B2C-Accueil 
...[^ Accueil 1 



Page racine / Niveau 0 
Niveau 1 



|j]-fjr) Artualites 
r||...g) Evenements 
[j-fj?] Produits 

IB -|e| Produit 1 — 
0 Q Produit 2 
g| Produit 3 
.[y Produit 4 
Q Commercants 
□ ^ Fonctions 
gj.fai Corbeille 



■Niveau 2 



Figure 5.68: 
Niveaux dans 
I'arborescenee des 
pages 



Le rootline 

Un concept important, souvent utilise dans le contexte des menus de TYP03, est celui des 
rootline. Le terme designe egalement le niveau le plus bas dans I'arborescence des pages. En 
selectionnant le rootline (le globe), vous pouvez affieher par exemple les gabarits standards 
dans le module Web — ► Liste. Ce terme a toutefois un autre sens lorsqu'on parle de menus, 
ce qui peut amener une certaine confusion. Ici, le rootline est une liste de pages, obtenue en 
parcourant les pages depuis la page courante jusqu'a la page racine. A la figure 5.68, le rootline 
de la page « Produit 2 » serait : Produit 2, Produits, B2C Accueil. 

Nous vous montrons ci-dessous comment configurer les differents types de menus avec Ty- 
poSeript. Dans I'application exemple BT3, ils sont sauvegardes dans les enregistrements de 
gabarit dans le Dossier Systeme Gabarits/Gabarits Principaux/Menus/. Pour I'affichage dans 
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les sites Web « B2C », « B2B » et « B2E », les menus desires sont inclus dans les gabarits prin- 
cipaux ad hoc en tant que gabarits de base. Les balises specifiques dans les gabarits principaux 
sont remplaeees par les objets correspondants. 

Exemple : dans le site Web « B2C », le gabarit principal html template definit la page. Integrez 
le menu que vous avez cree dans I'enregistrement de gabarit avee Include basis template. 

Dans le chemin d'objet page.10.subparts.NAVIGATI0N qui jusqu'ici contenait un marqueur, 

page. 10 { 

subparts .NAVIGATION = TEXT 

subparts .NAVIGATION. value = zone de navigation principale 

} 

I'objet de menu est desormais copie. Remarquez que c'est bien I'objet du menu qui est copie 
et non I'enregistrement de gabarit, meme si ces deux entites portent generalement le meme 
nom dans les exemples. 

subparts .NAVIGATION < temp . navigation_html 

Si I'objet menu avait deja ete cree, il serait visible sur le site Web. 

5.10.1 Le cObject HMENU — proprietes generates des menus 

Reference 460074 Quel que soit le menu que vous vouliez publier sur votre site Web, il sera cree avec le cObject 
HMENU [menu hierarchique}. 

Voici un exemple simple de creation d'un menu pour les pages de niveau 0 dans lequel les 
entrees sont affiehees les unes en dessous des autres, puisque chaque element de menu 
contient une balise <br />. 

temp . navigation - HMENU 
temp. navigation. entryLevel = 0 
temp . navigation { 
1 = TMENU 

l.NO.allWrap = | <br /> 

} 

Le HMENU s'occupe de rassembler I'information de la page. La restitution effective des entrees 
du menu est realisee par les sous-objets qui sont inclus dans une liste numerique. Par opposi- 
tion avec les types d'objet PAGE et COA, la numerotation revet ici une signification speciale. 
Les proprietes 1, 2, 3, etc. representent les niveaux des menus correspondants. La propriete 
entryLevel precise le niveau de I'arborescence des pages par rapport au rootline a partir du- 
quel vous commencez a compter les niveaux des menus. La configuration TS ci-dessus va done 
creer un menu a un niveau commencant au niveau 0. 

Notez que dans notre exemple, nous utilisons un objet de menu TMENU qui cree des liens de 
type texte. Comme nous I'avons deja mentionne, d'autres types de menus sont support.es par 
TYP03. 
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temp .navigation . 1 = TMENU 

# Le deuxieme niveau du menu est un menu graphique . 
temp .navigation. 2 = GMENU 

Les types de menus suivants sont disponibles dans TYP03 : 
TMENU 

Affiche un menu base sur du texte. 
GMENU 

Un GMENU est un « menu graphique ». Les images sont generees automatiquement a 
partir des titres des pages. 

GMENU_LAYERS/TMENU_LAYERS 

Les GMENU_LAYERS et les TMENU_LAYERS ajoutent des proprietes supplemen- 
taires a I'objet de menu GMENU ou TMENU correspondant, et I'affichent avec 
des couches DHTML. A cause des differentes interpretations des standards par 
les differentes versions des navigateurs, les objets de menu ne sont pas utilises 
pour les anciens navigateurs et ne le sont que dans une certaine mesure pour les 
nouveaux. 

GMENU_F0LD0UT 

Un GMENU_F0LD0UT etend I'objet de menu GMENU. II cree un menu a deux 
niveaux, s'etend ou se referme sans devoir recharger la page. 

IMGMENU 

L'objet IMGMENU cree un menu base sur une image avec des zones sensibles. 
JSMENU 

Un JSMENU cree un menu base sur une liste de selection. 

Outre la propriete entryLevel, un HMENU admet plusieurs autres proprietes qui controlent 
I'affichage du menu. Le nombre d'entrees du menu est specifie via les proprietes minltems et 
maxltems, et avec begin, vous definissez la premiere entree du menu. Avec excludeUidList, 
vous pouvez exclure certaines pages du menu. 

special est une propriete puissante qui vous aide a definir les menus selon une structure 
differente de celle de I'arborescence des pages. Vous pouvez creer des menus qui affichent le 
rootline, montrent les pages contenant certains mots-clesou donnent une liste des sous-pages 
des pages specifies. Toutes les options possibles sont passees en revue a la section 5.10.8. 

Les objets de menu eux-memes (TMENU, GMENU, ...) ont des etats communs mais ont aussi Reference 401761 
leurs propres etats. lis possedent par exemple tous le statut addParams, qui ajoute des pa- 
rametres supplementaires au lien du menu. 

A I'exception du JSMENU, tous les autres objets de menu de la serie TMENU, GMENU et Reference 478459 
IMGMENU partagent des etats comportant des elements de menu. NO (normal) represente le 
cas normal qui doit toujours etre defini comme etat par defaut. Tous les autres etats doivent 
etre actives pour etre utilises, et leur comportement doit etre specifie individuellement. 

NO 

L'element du menu dans I'etat normal NO. La definition est obligatoire. 



299 



I 5 TypoScript 



IFSUB 

Le statut IFSUB est actif si l'element de menu a des sous-pages. 

ACT 

L'element de menu a le statut ACT s'il est situe dans le rootline de la page affichee. 
ACTIFSUB 

Si l'element de menu est situe dans le rootline de la page actuelle et s'il a des sous-pages 
a afficher dans un menu, alors il a le statut ACTIFSUB. 

CUR 

La page courante a le statut CUR. 

USR 

L'etat USR s'applique aux pages dont I'acces est restreint par les groupes d'utilisateurs 
du frontend. II a priorite sur les etats IFSUB, ACT et CUR. 

SPC 

Le statut SPC s'applique en particulier au type de page Spacer et il est utilise speeiale- 
ment pour structurer les menus. SPC ne prevoit pas de fonctionnalite pour les effets de 
survol puisqu'il ne contient pas de lien. 

USERDEF1 

Les etats USERDEF1 et USERDEF2 sont definis dans un script separe (voir les proprietes 
HMENU/special = userdefined et .itemArrayProcFunc). 

USERDEF2 

Voir USERDEF1. 

RO 

Permet de ereer une variation des effets de survol (rollover) pour l'element de menu. 
Le statut RO n'est pas disponible pour beaucoup d'objets et doit done etre ajoute a la 
reference de ces objets. 

Les elements de menu sont introduits ci-dessous en se servant de I'application qui nous sert 
d'exemple. Seule une partie des proprietes disponibles seront utilisees. Consultez le document 
TSref pour obtenir une vue d'ensemble de toutes les autres proprietes. 

5.10.2 Menus de texte (TMENU) 

Reference 623534 Un TMENU cree un menu de texte a partir du titre de page ou de navigation de I'en-tete. 

Les titres sont automatiquement affiches sous forme de liens. C'est vous qui en configurez 
I'apparence. L'avantage principal des menus bases sur du texte est leur rapidite de chargement. 

Nousvoudrions mettre en evidence unecaracteristique particuliere de I'objet de menu TMENU : 
les proprietes before et after ont les memes proprietes que stdWrap. Mais la sous-propriete 
field n'est pas disponible directement pour ces dernieres. Ceci est du a une erreur de concep- 
tion qui a ete laissee dans TYP03, par souci de retroeompatibilite. Pour cette raison, vous 
devriez eviter cette propriete et utiliser a sa place la propriete data (par exemple before.data= 
page:title). 
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Exemple : navigation principale « B2C » 

Dans le site « B2C », un gabarit TS est cree au nom de temp.navigation_html pour la naviga- 
tion horizontale principale. II utilise le type de menu TMENU. 

Les etats des elements de menu se distinguent par la eouleur de leur police de caractere et par 
leurs icones servant de puces. Le resultat de la figure dans le frontend montre la page active, 
« Accueil », et les effets de survol, via I'element de menu « Evenements ». 



- accueil + actualites + evenements + produits + commerfants 



Figure 5.69: 
TMENU a un niveau 
en tant que 
navigation principale 



Le menu est defini a I'aide du cObject HMENU et de la propriete entryLevel=0. 

temp.navigation_html = HMENU 
temp.navigation_html . entryLevel = 0 



Le chemin d'objet temp.navigation_html.1 est un objet de type TMENU. 

temp.navigation_html . 1 = TMENU 



Tout d'abord, le comportement du statut NO est specifie. En activant la propriete ATagBe- 
foreWrap, la balise de lien est placee autour de I'enveloppe. La propriete linkWrap entoure le 
texte de la balise <font> en incluant la classe CSS. La propriete case=lower de la fonction 
stdWrap sert a afficher le texte en minuscules. Avec beforelmg, vous placez une image devant 
chaque lien. Si I'image doit aussi servir de lien, vous devez imposer beforelmgLink=1. Pour le 
TMENU, un statut pour les effets de survol est active lorsque R0=1 et I'image correspondante 
est remplacee par la valeur de propriete beforeROImg. 

temp . navigation_html . 1 { 
NO { 

ATagBef oreWrap = 1 

linkWrap = <font face= "Arial , Helvetica , sans-serif , sans-serif " size="2" color=" 
#666666" class="navi_no"> |     &nbsp ; </ f ont> 
stdWrap. case = lower 

beforelmg = f ileadmin/images/icons/navi_no . gif 
beforeROImg = fileadmin/ images/ icons/navi_ro . gif 
RO = 1 

} 



Verifiez le comportement des elements de menu dans I'etat ACT (qui signifie qu'ils sont situes 
dans le rootline de la page active) en y copiant I'objet NO. Seules les proprietes linkWrap et 
beforelmg sont ecrasees, afin de donner a ces elements une autre eouleur ou une classe CSS 
differente ainsi qu'une autre image pour I'etat actif, via wrap. L'etat doit etre active en posant 
ACT= 1. 

ACT < .NO 
ACT { 
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linkWrap = <font face= "Arial , Helvetica, sans-serif , sans-serif " size="2" colors" 
#333333" class="navi_act"> |   inbsp; inbsp; </f ont> 
beforelmg = fileadmin/ images/ icons/navi_act . gi f 

} 

ACT = 1 

} 

Integrez le gabarit T5 et I'objet temporaire dans le gabarit principal du site « B2C », et verifiez 
I'affichage dans le frontend. 

Exemple : navigation principale « B2B/B2E » 

Les sites « B2B» et« B2E»sont bases sur des balises <div> dont la disposition estentierement 
eontrolee par des feuilles de style en cascade, lis conviennent particulierement pour des sites 
Web repondant aux normes d'accessibilite. Pour les memes raisons, la navigation principale 
pour les deux sites est creee avec le gabarit TS temp.navigation_autoparser_tswrap. 

A la place des balises <font>, chaque element de menu est enveloppe comme une entree de 
liste avec wrapltemAndSub=<li>|</li>. Le menu entier est entoure par la balise HTML pour les 
listes, a savoir wrap=<ul>|</ul>. Le reste de la procedure est le meme que pour la navigation 
principale dans « B2C ». Les proprietes de I'etat NO sont copiees dans I'etat ACT et une seule 
classe CSS est configuree pour le lien en utilisant certains parametres (ATagParams=class= 
"navi-active"). 

temp.navigation_autoparser_tswrap - HMENU 
temp . navigation_autoparser_tswrap . 1 = TMENU 
temp . navigation_autoparser_tswrap . 1 { 

wrap = <ul>|</ul> 

NO { 

wrapl temAndSub = <li>|</li> 
stdWrap.case = lower 

} 

ACT < .NO 

ACT.ATagParams = class= "navi-active " 
ACT = 1 

} 

A present il vous suffit de definir I'apparence du menu via le fichier CSS inclus dans le gabarit 
principal. Ouvrez le fichier correspondant avec le module Fichier — ► Fichiers et editez les 
styles desires. 

ul { 

margin : 0 ; 
padding : 0 ; 

} 

#navi li, #Rootline li { 
display: inline ,- 
margin: 3px; 

} 

#navi a: link, #navi a:visited { 
padding: 0 5px 0 lOpx; 
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background: url (../ images / icons / link . gif ) no-repeat left; 
text-decoration: none; 
color: #666; 



Le resultat dans le frontend est le meme que celui de I'applieation « B2C ». 



Exemple : sous-navigation dans « B2C » 

Un TMENU est implemente dans le gabarit temp.navigation_html pour la sous-navigation. 
Les elements de menu des premier et deuxieme niveaux sont arranges en tableau et separes 
par differentes lignes. L'etat actif du premier niveau se distingue grace au titre en majuscules. 
Pour le deuxieme niveau, de petites icones sont affichees devant les titres. 

Dans le frontend, la navigation secondaire sur deux niveaux et les effets de survol apparaissent 
comme a la figure 5.70. 



Figure 5. 70: 
La navigation 

■ English Version secondaire TMENU 

sur deux niveaux 

PRODUIT1 
premiere page 
deuxieme page 
troisieme page 
quatrieme page 

b 

produit 2 
produit 3 



La navigation secondaire commence au niveau 1, ce qui est traduit par le code entryl_evel=1. 

temp . subnavigation_html = HMENU 

temp . subnavigation_html . entryLevel = 1 

Les pages meta « Accueil », « Impression », « Plan du site » et « Contact » du Dossier Systeme 
Fonctions ne sont pas affichees si vous donnez une liste d'lD de pages a la propriete ex- 
cludeUidList. Toutefois, il est plus facile de donner a ces pages le type Not in menu. 

temp.subnavigation_html.excludeUidList = 122,121,120,119 

Le niveau 1 du menu est un TMENU. 

temp . subnavigation_html . 1 = TMENU 

Ce niveau est mis en forme par une table a trois colonnes. 
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temp . subnavigation_html . 1 .wrap = <table width="170" cellspacing= " 0 " cellpadding= " 0 
" border- " 0 "xtrxtd width-" 7 " ximg src- " clear . gif " width-"7" height-"l" alt-"" bo 
rder- " 0 "></ tdxtd width- " 11 " ximg src- " clear . gif " width-"ll" height-"l" alt-"" bor 
der="0"x/tdxtd width= " 152 " ximg src = " clear . gif " width="152" height="l" alt="" bo 
rder= " 0 " >< I tdx / tr> | < / table> 

Les etats NO et ACT sont configures pour que chaque element de menu soit affiehe, via la pro- 
priete allWrap, dans une ligne differente de la table, et que I'image soit une ligne separatrice. 
La propriete wrapltemAndSub permet d'inclure les elements de sous-menu de niveau 2, mais 
ee n'est pas ce que nous voulons faire ici. 

temp . subnavigation_html . 1 { 
NO { 

linkWrap = <font face- "Arial , Helvetica, sans-serif , sans-serif " size-"2" color-" 
#666666" class- "subnavi_no">    |</font> 
stdWrap.case = lower 

allWrap = <trxtd>&nbsp ; </tdxtd colspan- " 2 " ximg src- " f ileadmin/images/layout 
/subnavil_line . gif "xbr /> |</tdx/tr> 
ATagBef oreWrap = 1 

} 

ACT < .NO 

ACT . stdWrap . case = upper 
ACT = 1 

} 

Le second niveau du menu est aussi un TMENU. Les elements de menu du second niveau ont 
leurs propres icones et sont disposes par une mise en page HTML grace a la propriete allWrap. 

temp . subnavigation_html . 2 = TMENU 
temp . subnavigation_html . 2 { 
NO { 

linkWrap = <font face= "Arial , Helvetica, sans-serif , sans-serif " size="2" color=" 
#666666" class= " subnavi2_no " > |</font> 
stdWrap.case = lower 

allWrap =<trxtd colspan= " 2 " >  < / tdxtdximg src=" f ileadmin/images/layout/ 
subnavi2_line.gif "xbr /> |</tdx/tr> 

beforelmg = fileadmin/ images/ icons /subnavi2_no . gif 
beforeROImg = f ileadmin/images/icons/subnavi2_ro . gif 
RO = 1 

ATagBeforeWrap = 1 

} 

ACT < .NO 

ACT .beforelmg = f ileadmin/images/icons/subnavi2_act . gif 
ACT = 1 

} 

Incorporez le gabarit TS dans le gabarit principal du site « B2C » et retournez a nouveau dans 
le frontend afin de visualiser le resultat . 

5.10.3 Menus graphiques (GMENU) 

Reference 193130 Un GMENU est similaire a un TMENU dans son fonctionnement, a ceci pres qu'il cree un lien 
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sous forme d'image pour chaque page ou titre de navigation via la fonction TYP03 interne du 
GIFBUILDER. Si ce type de menu est plus riche en termes de possibilites, il augmente cependant 
les temps de chargement de I'application, puisque tous les elements de menu et leurs etats 
doivent etre inclus en tant qu'images. 



Exemple : navigation secondaire dans « B2C » 

En guise de deuxieme illustration, un simple menu graphique est cree pour la sous-navigation 
dans le site « B2C » avee le gabarit temp.subnavigation_html_gmenu. Le premier niveau 
aligne les elements de menu sur la gauche et trace deux lignes autour d'eux. Le second niveau 
est aligne a droite et comprend une ligne sur le cote droit. Les pages actives sont mises en 
couleurs (voir la figure 5.71). 



Figure 5.71: 
Sous-navigation sur 
deux niveaux avec un 
GMENU 



Creez le cObject HMENU en imposant entryLevel=1 et faites du premier niveau du menu un 
GMENU. 

temp . subnavigation_html_gmenu = HMENU 

temp . subnavigation_html_gmenu . entryLevel = 1 

temp . subnavigation_html_gmenu . 1 = GMENU 

Precisez d'abord les proprietes de I'objet NO ; dans les objets GMENU, il s'agit, par definition, 
du type GIFBUILDER. 

temp . subnavigation_html_gmenu . 1 { 
NO { 

Chaque element de menu se termine par la balise <br />. La taille de I'image, XY=1 50,40, et Reference 023806 

la couleur de I'arriere-plan, backColor=white, sont definies par les proprietes de la fonction 

GIFBUILDER. 

wrap = | <br / > 
XY = 150,40 
backColor = white 

Les objets du GIFBUILDER sont crees via une liste numerique dans laquelle chaque element est 
du type GifBuilderObj. De cette maniere, I'element de menu du premier niveau est compose de 
plusieurs objets. 
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Les objets 7 et 8 creent chacun un GifBuilderObj du type BOX et ceux-ci se chevauchent a 
cause de la hierarchic 

# boite grise 

7 = BOX 

7. dimensions = 16,18,120,20 

7 . color = tDFDFDF 

# boite blanche 

8 = BOX 

8 . dimensions = 16,18,119,19 
8. color = #FFFFFF 

C'est parce que les proprietes dimensions ne different que d'un pixel que vous ne voyez que 
de fines lignes grises sur les bords de la boite contenant le menu. 

L'objet 10 est un GifBuilderObj de type TEXT et il contient le type de donneesstdWrap. La ligne 
de code 10.text.field=title permet d'afficher le titre de la page. La propriete fontFile pointe 
vers la police de caractere TrueType utilisee dans la creation d'images; celle-ci doit d'abord 
etre chargee dans le systeme de fichiers sous fileadmin/. ... La taille des polices de caractere 
et leur couleur sont definies dans les proprietes fontSize et fontColor. L'espacement est defini 
en coordonnees x/y par la propriete offset et I'alignement du texte par align. 

10 = TEXT 

10 . text . field = title 

10. fontFile = fileadmin/ f onts/VERDANAB . TTF 

10. fontSize = 11 

10. fontcolor = #FFFFFF 

10. offset = 30,31 

10. align = left 

La propriete niceText qui affiche plus clairement les petites lettres ne fonctionne pas toujours 
comme prevu, selon la version d'lmageMagick que vous possedez ; el le mobilise egalement des 
ressources du serveur pour creer les images. 

#10. niceText = 1 

Le GifBuilderObj du type SHADOW permet de creer des ombres dont la position est fixee par 
les coordonnees de la propriete offset, tandis que le focus et la transparence sont determines 
par blur et opacity. 

# Ombre pour le texte 
10 . shadow. of f set = 1,1 
10. shadow. blur =80 

10 . shadow. opacity = 40 

Le GifBuilderObj TEXT n'a pas de propriete caractere gras, mais vous pouvez simuler celle-ci 
en repassant le texte une seconde fois (20<.10) ou en imposant iterations=2. 



# Simulation des caracteres gras 
20 < .10 

} 



Une autre possibility qui semble generalement meilleure, consiste a inclure une vraie police de 
caraetere gras (10.fontFile=fileadmin/fonts/VERDANAB.TTF). 

Dans I'etat RO=1 (effet de survol) des elements de menu, seule la couleur de la police de 
caraetere est remplacee. 

RO < .NO 
RO { 

10. fontcolor = #FFCC66 
20 > 

20 < .10 

} 

RO = 1 

L'element de menu a I'etat actif ACT est associe a un autre GifBuilderObj BOX. 

ACT < .RO 
ACT { 

# Ombre 
5 = BOX 

5. dimensions = 18,20,120,20 
5. color = #D3D3D3 

} 

ACT = 1 

} 

Pour construire le menu de second niveau, on commence par initialiser en copiant toutes les 
donnees du menu de niveau 1. 

temp . subnavigation_html_gmenu . 2 = GMENU 

temp . subnavigation_html_gmenu . 2 < temp . subnavigation_html_gmenu . 1 
temp . subnavigation_html_gmenu . 2 { 
NO { 

La taille de I'image a creer est ecrasee. 

XY = 150,24 

Les propriet.es 7 et 8 (boites grise et blanche) sont supprimees. 

7 > 

8 > 

Un nouveau GifBuilderObj de type BOX est cree dans I'objet 8 avec une largeur de 1 pixel et 
une hauteur de 24 pixels. 

# ligne a droite 
8 = BOX 

8. dimensions = 136,0,1,24 
8. color = #DFDFDF 



Plusieurs proprieties du GifBuilderObj 10 de type TEXT sont ecrasees. 
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10. offset = -25,16 
lO.fontSize = 10 
10. align = right 
20 < .10 

} 

L'etat RO du niveau 2 reprend les proprietes de I'objet NO et ecrase seulement la couleur de la 
police de caractere. 

RO > 

RO < .NO 
RO { 

10. fontcolor = #FFCC66 

20 > 

20 < .10 

} 

RO = 1 

L'etat aetif ACT reprend les proprietes de I'objet RO. 

ACT < .RO 
ACT = 1 

} 

Le menu est a present termine. Integrez le gabarit TS et I'objet temporaire dans le gabarit 
principal et verifiez le resultat dans le frontend. 

5.10.4 Menus bases sur des couches (TMENU_LAYERS/ 
GMENU_LAYERS) 

Reference 620108 Les objets de menu TMENLLLAYERS et GMENU_LAYERS se basent respectivement sur TMENU 
et GMENU tout en etendant leurs proprietes. lis creent tous les deux un outil de navigation sur 
plusieurs niveaux via des couches DHTML et JavaScript. Pour cela, integrez leurs fonctionna- 
lites avec le script media/scripts/tmenujayers.php et/ou media/scripts/gmenujayers.php. 
Lorsque vous choisissez le menu, souvenez-vous du probleme de la compatibility des naviga- 
teurs. En particulier, les anciens navigateurs ne supportent pas les versions du W3C Document 
Object Model (DOM) ou les supportent seulement dans une certaine mesure. 

Reference 599829 Les navigateurs a jour, tels qu'Opera 7, supportent les versions recentes du DOM. Si vous vou- 
lez utiliser un TMENLLLAYERS, il est judicieux de modifier les fonctions JavaScript correspon- 
dantes dans le fichier /media/scripts/jsfunc.layermenu.js (voir la reference ci-contre). 

Exemple : navigation principale dans « B2C » 

Pour la navigation principale dans le site « B2C », un menu a couche graphique est cree dans 
le gabarit temp.navigation_html_gmenu_layers. 

Si vous survolez les elements de menu du premier niveau, vous devriez voir la selection des 
sous-pages dans une couche. El le reste presente si une page du second niveau est active. Les 
icones devant les elements de menu et la couleur des polices de caractere changent lors du 
survol et lorsque l'etat est actif. 
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Le resultat est visible a la figure suivante. 



+ accueil + actualites + evenements 



a produits + commerEants 

prodult 1 



produit 2 
pi oduit 3 



b 



Figure 5.72: 
Navigation prineipale 
avec un 

GMENU_iAYERS 



Integrez d'abord la bibliotheque gmenu_layers.php et creez ensuite un menu hiera rchique 
dans un objet temporaire (HMENU). Le premier niveau est un objet de menu GMENU_LAYERS. 

includeLibs . gmenu_layers = media/scripts/gmenu_layers .php 

temp.navigation_html_gmenu_layers = HMENU 

temp . navigation_html_gmenu_layers . 1 = GMENU_LAYERS 

Determinez a present le comportement de la couche. 

La propriete layerStyle permet d'assigner les attributs CSS a la balise <div> utilisee. Dans ee 
cas, la position en y est fixee a 195 pixels. lockPosition fixe la position des couches qui, des 
lors, ne se refere plus a la position de la souris. Choisissez x pour les menus horizontaux et y 
pour les menus verticaux. xPosOffset definit le decalage de la couche sur I'axe des x a partir 
de I'element de menu. Cette propriete se refere - selon que lockPosition est activee ou non - 
soit au coin superieur gauche de chaque image du menu, soit a la position a partir de laquelle 
el le a ete activee. 

temp . navigation_html_gmenu_layer s . 1 { 

layerStyle = position : absolute ; left: 0; top : 19 5 ; width : 10px; VISIBILITY : hidden; 
xPosOffset = -215 
lockPosition = x 

La propriete expAII=1 de I'objet de menu GMENU devrait etre activee dans tous les cas, pour 
que le deuxieme niveau puisse aussi beneficier des effets de survol. Sinon, la navigation en 
couches ne fonctionnera pas. 

expAll = 1 

La propriete displayActiveOnLoad vous garantit que le menu en couches reste visible, meme 
pour une page active du second niveau. 

displayActiveOnLoad = 1 

Le niveau 1 du menu est defini comme un GMENU, comme dans I'exemple de la navigation 
secondaire graphique dans le site « B2C ». D'abord nous activons I'etat normal NO : 

NO { 

backColor = white 

La taille des elements de menu est calculee automatiquement a partir de la longueur des 
images du tableau GifBuilderObj, dans ce cas, avec le propriete XY du GIFBUILDER. La donnee 
x,y +calc permet cet acces et fixe la valeur de Xa [10.w]+40 pixels et celle de Ya 30 pixels. 
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[10.w] representee la largeur w de I'objet 10 de la liste numerique, a laquelle nous ajoutons 
40 pixels. De meme, la hauteur de I'objet serait parametree par le code [lO.h]. 

XY = [10.w]+40, 30 

Les autres proprietes sont deja connues. Deux GifBuilderObj du type BOX se chevauchant, 5 et 
7, sont crees. L'objet 10 affiche le titre de la page et le met en forme. 

5 = BOX 

5 . dimensions = 2,15,5,1 
5. color = #666666 

7 = BOX 

7 . dimensions = 4,13,1,5 
7 .color = #666666 

10 = TEXT 

10. text. field = title 
10. text. case = lower 
10. offset = 14,18 

lO.fontFile = f ileadmin/ f onts/ARIAL . TTF 

lO.fontSize = 12 

10. fontcolor = #666666 

} 

L'etat RO est active pour les effets de survol. Les proprietes de I'objet NO sont reprises et 
certaines valeurs de couleurs sont modifiees. 

RO < .NO 
RO { 

5. color = #E6B800 
7. color = #E6B800 
10. fontcolor = #E6B800 

} 

RO = 1 

Les elements de menu, lorsqu'ils sont actifs, devraient etre precedes d'un cadre jaune autour 
d'un signe moins. Pour ce faire, ajoutez deux carres (un jaune et un blanc) qui se chevauchent 
a la liste numerique, sous la forme des GifBuilderObj 1 et 3 de type BOX, et supprimez I'objet 
7 (le plus devient alors un moins). 

ACT < .NO 
ACT { 

# boite autour du signe — > carre jaune ou blanc 
1 = BOX 

1. dimensions = 0,11,9,9 
1. color = #E6B800 

3 = BOX 

3. dimensions = 1,12,7,7 
3. color = white 



# non | 
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7 > 

} 

ACT = 1 

} 

Le deuxieme niveau du menu affiche les elements de menu sous forme d'un GMENU. Cela 
n'apporte aucune nouvelle propriete : on ne I'utilise iei que dans un but pratique. 

temp .navigation_html_gmenu_layers . 2 = GMENU 
temp.navigation_html_gmenu_layers . 2 .wrap = | <br /> 
temp . navigation_html_gmenu_layer s . 2 { 
NO { 

backColor = white 
XY = 120, 19 

# lignes de gauche et du dessous 
5 = BOX 

5. dimensions = 0,0,1,19 
5. color = #CCCCCC 
7 = BOX 

7. dimensions = 0,18,120,1 
7. color = #CCCCCC 

10 = TEXT 

lO.fontFile = f ileadmin/ f onts/ARIAL . TTF 

10 . fontSize = 11 

10. text. field = title 

10. text. case = lower 

10. offset = 12,10 

10. fontcolor = #666666 

} 

RO < .NO 

RO. 10. fontcolor = #E6B800 
RO = 1 

ACT < .NO 

ACT. 10. fontcolor = #E6B800 
ACT = 1 

} 

Observez le menu dans lefrontend, etendez les sous-menus pour les effetsdesurvol etgardez- 
les ouverts pour les pages actives. 

5.10.5 GMENU_F0LD0UT 

L'objet de menu GMENU_F0LD0UT se limite a deux niveaux et genere une navigation dyna- Reference 623360 
mique via JavaScript. Pour le premier niveau du menu, utilisez un menu graphique et pour 
le second, choisissez soit un menu graphique, soit un menu de texte. La fonctionnalite est 
integree avec le script media/script/gmenu_foldout.php. N'oubliez pas que la compatibilite 
est restreinte pour les anciens navigateurs lorsque vous utilisez ce type de navigation. 
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Exemple : sous-navigation « B2C » 

En guise d'illustration, examinons la navigation secondaire du site « B2C », qui a jusqu'a 
present ete implementee avee un TMENU. Creez un nouveau gabarit TS, temp.subnavigation_ 
html_gmenu_foldout. Ceci devrait entramer le deploiement dynamique des elements de sous- 
menu du premier niveau lorsque vous cliquez dessus. La disposition est la meme que celle du 
menu de texte et el le apparait comme dans la figure suivante : 



Figure 5.73: 
Navigation 
secondaire sur deux 
niveaux avee un 
GMENU_FOLDOUT 



■ English Version 

PRODUIT1 
premiere page 
deuxieme page 
troisieme page 
quatrieme pagj 

produit 2 
produit 3 



Les deux niveaux du menu sont construits avee I'objet de menu GMENU. Integrez d'abord la 
bibliotheque des fonctions requises, gmenu_foldout.php, via includeLibs. 

includeLibs .gmenu_f oldout = media/scripts/gmenu_f oldout .php 

Definissez un cObject temporaire de type HMENU. La propriete entryLevel=1 permet de de- 
marrer le menu au premier niveau du site Web. Pour le premier niveau, nous definissons I'objet 
de menu GMENU_FOLDOUT. 

temp . subnavigation_html_gmenu_f oldout = HMENU 

temp . subnavigation_html_gmenu_f oldout . entryLevel = 1 

temp . subnavigation_html_gmenu_f oldout . 1 = GMENU_FOLDOUT 

Afin que les sous-pages du second niveau soient toujours affichees, vous devez activer la 
propriete expAII de I'objet de menu. menuOffset place le premier niveau du menu dans le coin 
superieur gauche de la page. La propriete subMenuOffset permet de definir le decalage entre 
les sous-elements du menu et I'element principal correspondant. La couleur de I'arriere-plan 
est definie au moyen de la propriete menuBackColor et la hauteur et la largeur respectivement 
avee menuWidth et menuHeight. 

temp . subnavigation_html_gmenu_f oldout . 1 { 
expAl 1-1 

menuOffset = 17, 202 
subMenuOffset = 14,25 
menuBackColor = white 
menuWidth = 164 
menuHeight = 800 
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Si vous voulez que le sous-menu se ferme lorsqu'un autre menu principal est appele, fixez 
stayFolded=0. La vitesse d'ouverture dynamique du sous-menu est definie via le nombre 
d'etapes; foldSpeed=1 affiche immediatement l'etat final. Avec displayActiveOnLoad=1, les 
sous-menus s'ouvrent automatiquement si la page courante est situee dans ce sous-menu. 

stayFolded = 0 
foldSpeed = 6 
displayActiveOnLoad = 1 

L'etat normal NO est defini pour le premier niveau. La eouleur de I'arriere-plan et sa ta i I le sont 
specifies. 

NO { 

backColor = #FFFFFF 
XY = 164, 22 

L'objet 3 de la liste numerique insere une image sous la forme d'un GifBuilderObj IMAGE qui 
met en evidence les elements de menu. 

3 = IMAGE 

3. file = f ileadmin/images/layout/subnavil_line . gif 
3. offset = 3 

L'objet 10 affiche le titre de la page et le met en forme. 

10 = TEXT 

10. text. field = title 
10. text. case = lower 
10. offset = 29,15 
10. fontcolor = #666666 

lO.fontFile = f ileadmin/ f onts/ARIAL . TTF 
lO.fontSize = 11 

} 

L'etat actif ACT reprend de nouveau les proprietes de l'objet NO et ne change que quelques 
details qui servent a afficher le titre de la page en majuscules (case=upper). 

ACT < .NO 
ACT { 

10. text. case = upper 

} 

ACT = 1 

} 

Le deuxieme niveau du menu, temp.subnavigation_html_gmenu_foldout.2, est defini de la 
meme maniere. Contrairement au niveau 1, vous avez ici le choix entre un TMENU et un 
GMENU. Le GMENU a ete utilise dans cet exemple-ci, et ses etats RO et ACT sont marques par 
des icones differentes. 

temp. subnavigation_html_gmenu_f oldout . 2 - GMENU 
temp . subnavigation_html_gmenu_f oldout . 2 { 
NO { 
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XY = 150, 18 
backColor = white 

3 = IMAGE 

3 . file = f ileadmin/images/layout/subnavi2_line.gif 
3. offset = 5 

10 = TEXT 

10. text. field = title 
10. text. case = lower 
10. offset = 24,13 
10. fontcolor = #666666 

lO.fontFile = f ileadmin/ f onts/ARIAL . TTF 
lO.fontSize = 11 

} 

RO < .NO 
RO { 

12 = IMAGE 

12 . file = f ileadmin/ images/ icons/subnavi2_ro . gif 
12. offset = 15,2 

} 

RO = 1 

ACT < .RO 
ACT { 

12 . file = f ileadmin/ images/ icons/subnavi2_act . gif 

} 

ACT = 1 

} 

Inserez le gabarit TS et I'objet temporaire dans le gabarit principal du site « B2C » et verifiez 
le resultat dans le frontend. Pour eviter que chaque page ne se recharge a chaque ouverture 
du sous-menu, creez des pages dans le premier niveau de votre application qui admettent des 
sous-pages sans contenu, comme le type de pages Shortcut. 

La propriete dontLinklfSubmenu ouvre le second niveau du menu s'il a des sous-pages, mais 
n'affiche pas cette page sous forme de lien. Le processus de chargement est omis. 

dontLinklfSubmenu = 1 

Les pages sans sous-pages sont affichees comme d'habitude avec leur lien. 

5.10.6 lmageMaps (IMG MENU) 

Reference 610406 L'objet de menu IMGMENU genere un menu a partir de I'image en arriere-plan et des titres des 
pages du niveau de menu a afficher. Pour les elements de menu, des zones sensibles sont confi- 
gurees avec des balises <area>, creant des liens vers les pages correspondantes. Les elements 
de menu sont des objets GIFBUILDER que vous pouvez structurer comme vous I'entendez. Pour 
les etats NO, ACT, SPC, etc., GIFBUILDER cree des images differentes dans chaque cas. 
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Exemple : navigation principale dans « B2C » 

Pour le site « B2C », une nouvelle navigation principale peut a present etre implementee avec 
I'objet de menu IMGMENU via un nouveau gabarit TS, temp.navigation_imgmenu. Le resultat 
suivant est alors genere dans le frontend. 



QAccuell +Actualit6s 




Figure 5.74: 
Navigation principale 
avec un IMGMENU 



Le menu represents I'outil de navigation principale, c'est pourquoi il demarre au niveau Root- 
level : entryLevel=0. La propriete maxltems precise que six elements de menu au maximum 
peuvent s'afficher. 

temp . topmenu = HMENU 

temp, topmenu. entryLevel = 0 

temp, topmenu. maxltems = 6 



Le menu n'admet qu'un niveau, un IMGMENU. Specifiez I'image de I'arriere-plan sur laquelle 
est affiche le titre au moyen de la propriete main du type de donnees GIFBUILDER. 

Comme nous I'avons deja montre, les objets du GIFBUILDER sont generes sous la forme d'une Reference 023805 
liste numerique dont chaque element a le type de donnees GifBuilderObj. L'objet 10 cree un 
GifBuilderObj de type IMAGE, qui lie I'image voulue avec la propriete file. 

temp . topmenu . 1 - IMGMENU 
temp . topmenu. 1 { 
main. 10 = IMAGE 

main. 10. file = f ileadmin/images/layout/bg_imgmenu . gif 



La taille originale de I'image est entree dans les proprietes XY et la palette de couleurs de 
I'image est reduite a 16 couleurs via reduceColors, ce qui a pour effet de reduire la taille du 
fichier. 

main.XY = [10. w] , [10. h] 
main. reduceColors = 16 



Definissez le point de depart du menu a partir du coin superieur gauche de I'image avec 
dWorkArea. 

dWorkArea = 12,22 



L'etat normal du menu est defini. La propriete distrib specifie la distance ente les elements 
de menu. L'objet 10 affiche le titre de la page comme un GifBuilderObj TEXT et definit sa 
presentation. 

NO { 

distrib = textX+25, 0 
10 = TEXT 

10. text. field = title 
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lO.fontSize = 12 

10. fontcolor = #666666 

lO.fontFile = f ileadmin/ f onts/ARIAL . TTF 
lO.niceText = 1 
10. offset = 2,0 

imgMap vous permet d'acceder a une propriete de GIFBUILDER qui cree une carte d'images 
(imagemap) pour le fichier image a partir du GifBuilderObj TEXT. La propriete explode elargit 
la zone sensible avec les coordonnees x/y. 

1 0 . imgMap . explode = 3,2 

Le signe « plus » qui precede chaque element de menu est mis en pratique via deux GifBuil- 
derObj de type BOX. 

# I 

20 = BOX 

20 . dimensions = -5,-6,1,5 
20. color = #666666 

# - 

3 0 = BOX 

30 .dimensions = -7,-4,5,1 
30. color = #666666 

} 

L'etat actif ACT reprend toutes les propriet.es de I'objet NO. L'objet 20 de la liste numerique est 
supprime (« plus » devient « moins »), et un cadre est cree avec les objets 40, 50, 60 et 70. 

ACT < .NO 
ACT { 

20 > 

#- en dessous 
40 = BOX 

40 . dimensions = -9,0,9,1 
40. color = #666666 

# - au-dessus 
50 < .40 

50 .dimensions = -9,-8,9,1 

# | a gauche 
60 < .40 

60 .dimensions = -9,-8,1,9 

# | a droite 
70 < .40 

70 .dimensions = -1,-8,1,9 

} 

ACT = 1 

} 

Le menu est termine. Integrez le gabarit TS temp.navigation_imgmenu et l'objet temporaire 
temp.topmenu dans le gabarit principal et testez le resultat dans le frontend. 
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5.10.7 Menus JavaScript (JSMENU) 

L'element de menu JSMENU configure une navigation pour laquelle les pages sont selection- Reference 421175 

nees via deux listes deroulantes de menus qui dependent les unes des autres. Chaque menu de 

selection represente un niveau du site Web. La caracteristique la plus importante de ce menu 

par rapport a un simple menu de selection est que les niveaux les plus bas sont repris avec les 

entrees correspondantes qui dependent du plus haut niveau selectionne, sans que la page ne 

doive etre rechargee dans le navigateur. Un JSMENU peut afficher jusqu'a cinq niveaux (cinq 

listes deroulantes de menus). 



Exemple : navigation principale dans « B2B » 

Dans cet exemple, nous modifions la navigation principale du site « B2B » avec le gabarit 
TS temp.navigation_tswrap_jsmenu. La figure suivante montre le menu dans son etat final 
lorsque la sous-page « Produit 1 » est selectionnee. 



Produits 
Menu: 
Accueil 
Actual ites 
Evenements 



Produits 



Revendeurs 
Telecharqernents 

Definissez I'objet temporaire temp.jsmenu_tswrap comme un cObject HMENU et le premier 
niveau du menu comme un JSMENU. 

temp, j smenu_tswrap = HMENU 
temp, j smenu_tswrap . 1 = JSMENU 

Le nombre de niveaux a afficher est determine a I'aide de la propriete levels=2. 

temp, j smenu_tswrap . 1 { 
levels = 2 




Figure 5.75: 

Le menu principal en 

JSMENU 



La liste numerique vous permet de definir le comportement de differents niveaux. La liste 
deroulante des menus de niveau 1 est separee de la liste deroulante pour le niveau suivant 
par un separateur « espace vide ». Si vous voulez selectionner a I'avance la page active, alors 
posez la valeur showActive=1. Si aucune page n'est selectionnee, alors le premier element de 
la liste deroulante n'a normalement pas de valeur. Dans ce cas, vous pouvez donner un nom a 
cet element grace a la propriete firstLabel. 

i { 

wrap = | &nbsp ; 
showActive = 1 
firstLabel = Menu: 

} 



317 



5 TypoScript 



Les valeurs du premier niveau passent au deuxieme niveau et seul leur nom est ecrase. 

2 < .1 

2.firstLabel = Sous-menu: 

} 

Le menu est termine : vous pouvez I'inclure dans le gabarit principal du site « B2B ». 

5.10.8 Menus .special 

Reference 743914 Le cObject HMENU affiche par defaut la structure de la page sous la forme d'une arborescence, 
mais il peut generer d'autres structures grace a la propriete special. Par exemple, un menu 
rootline affiche les pages du rootline. Line configuration simple ressemble a ceci : 

temp . navigation - HMENU 
temp . navigation . entryLevel = 0 
temp . navigation . special = rootline 
temp . navigation { 
1 = TMENU 

l.NO.allWrap = |/  

} 

Ce code produit le resultat suivant : 

B2C-Accueil/ Produits/ Produit 2/ 

La propriete special determine la structure particuliere que le HMENU doit creer. Les types 
suivants sont disponibles. Les proprietes de chaque type de menu se trouvent dans le document 
TSref. 

directory 

Le type directory genere un menu a partir des sous-pages de I'lD des pages specifies 
ou a partir de la page courante. 

list 

list vous permet de creer un menu pour des pages precises determinees par leur ID. 
updated 

Si vous voulez afficher des pages selon qu'elles ont ete mises a jour ou non, utilisez 
updated. 

Rootline 

Le chemin de la page racine a la page active aide d'habitude I'utilisateur a garder une 
vue d'ensemble des applications complexes. Ce menu rootline est genere par le type 
rootline. 

browse 

Le type browse vous permet de naviguer a travers les pages de differentes manieres 
(precedent, suivant, ...) 

keywords 

Le type keywords cree un menu de pages qui ont un ou plusieurs mots-cles en com- 
mun avec la page courante dans I'en-tete de page. Cela facilite I'affichage des pages 
interdependantes. 
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userdefined 

Le type userdefined sert a controler les menus avec votre propre script PHP. La reference 
TSref contient un exemple detaille de ce menu. 



Exemple : directory 

Presque chaque application comprend des pages ne devant pas apparaTtre dans le contexte de 
la navigation principale. Dans I'application exemple « BT3 », ceci s'applique aux elements de 
menu meta « Accueil », « Impression », « Plan de site » et « Contact ». lis doivent toujours 
etre presents et sont stockes ici dans le Dossier Systeme Fonctions de I'arborescence des pages. 
Utilisez le type de menu directory pour I'affichage. 

Le menu doit etre structure comme sur la figure suivante, et place en dessous de la navigation 
secondaire, sur la gauche de la page. 

C3 accueil 
(i impression 
«5S&pian du site 
© contact 



Creez votre propre gabarit TS temp.metas_html pour le site « B2C » et definissez un HMENU 
comme objet temporaire. La propriete special recoit le type de menu desire avec la valeur 
directory. La propriete value reprend les ID des pages auxquelles le menu se refere. Puisque 
la valeur fait reference aux ID des pages du Dossier Systeme Fonctions, c'est une constante 
definie en consequence qui est assignee a la valeur. 

temp.metas_html = HMENU 

temp. metas_html . special = directory 

temp. metas_html . special .value = {$metas.pid} 

Vous pouvez configurer le menu comme vous I'entendez; dans I'exemple, il est configure en 
TMENU et est presente sous forme de tableau. 

temp.metas_html . 1 = TMENU 
temp .metas_html . 1 { 

wrap = <br /xbr /xbr /xtable width-"170" cellspacing- " 0 " cellpadding- " 0 " bord 
er = " 0 " > | < / tablexbr /xbr /xbr /> 
NO { 

linkWrap = <font face= "Arial , Helvetica, sans-serif , sans-serif " size="2" color=" 
#666666" class= "metas " > | </font> 

allWrap = <trxtdximg src= " clear . gif " width="10" height="l" alt="" border="0" 
x/tdxtd align="left" valign= " top " > | </ tdx/ tr> 

ATagBeforeWrap = 1 

Les images precedant le titre des pages sont affichees grace a la commande import.field= 
media (le champ Fichiers dans I'en-tete des pages correspondantes). 



Figure 5.76: 
Information meta 
ereee par la propriete 
special.directory 
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# obtenez 1 ' image de la page (le champ Fichiers des pages de type Avarice) 
beforelmg. import = uploads /media/ 
beforelmg. import . field = media 
beforelmg. import . listNum = 0 

} 

} 

Pour les sites « B2B » et « B2C » bases sur des balises <div>, le meme menu est realise par le 
gabarit TS temp.metas_autoparser_tswrap : 

temp.metas_autoparser_tswrap = HMENU 
temp . metas_autoparser_tswrap . special = directory 
temp . metas_autoparser_tswrap . special . value = {$metas.pid} 
temp . metas_autoparser_tswrap . 1 = TMENU 
temp.metas_autoparser_tswrap. 1 { 
noBlur = 1 

wrap = <ul id= "metas " > | </ul> 
NO { 

wrapItemAndSub = <li>|</li> 
beforelmg. import = uploads /media/ 
beforelmg . import . field = media 
beforelmg . import . listNum = 0 

} 

} 

A present, inserez la navigation meta dans le gabarit principal adequat avec Include basis 
template et remplacez les balises specifiques en copiant lesobjets temporaires eorrespondants. 
Utilisez le eObject COA pour Integration, puisque la navigation secondaire et I'information 
meta doivent s'affieher groupees dans une sous-pa rtie ou dans une balise <div>. 

Exemple « B2C » : 

page. 10 { 

subparts .LEFT = COA 

subparts . LEFT . 10 < temp . subnavigation_html 
subparts . LEFT . 20 < temp.metas_html 

Exemple « B2B »/« B2E» : 

page { 

# Gauche / menu secondaire 
40 = COA 

40.10 < temp . subnavigation_autoparser_tswrap 

40.20 < temp.metas_autoparser_tswrap 

40 . stdWrap.wrap = <div id= " subnavigation" > | </div> 

Exemple : rootline 

Un menu rootline est prevu dans I'en-tete de I'application exemple. II montre a I'utilisateur le 
chemin courant. Les titres des pages apparaissent sous forme de liens. En pratique, cela devrait 
ressembler a la figure suivante : 
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! ! B2C-Accueil / Produits / Produit 1 / premiere page 

I — 

Definissez en premier lieu un HMENU avec la propriete special=rootline. 

temp . rootline_html= HMENU 
temp. rootline_html . special = rootline 

La propriete range vous permet de preciser les niveaux de debut et de fin. Si vous omettez la 
valeur de fin (ou si vous la fixez a -1), le chemin complet est affiche. Avec -2, la page courante 
ne sera pas ineluse dans le chemin, avec -3, les deux derniers niveaux ne sont pas repris, etc. 
Notez que vous ne pouvez pas utiliser d'espace dans la valeur. 

temp . rootline_html . special . range = 0 | -2 

Dans I'exemple, le menu est un TMENU base sur du texte. La propriete wrap insere deux fois le 
caractere « deux points » devant les elements de menu, linkwrap fournit une balise <font> a 
I'etat normal NO. 

temp.Rootline_html . 1 = TMENU 
temp. Rootline_html . 1 { 

wrap = &nbsp ; &nbsp ; : : | 

target = _top 

NO { 

linkWrap = <font face- "Arial , Helvetica, sans-serif , sans-serif " size-"l" color-" 
#666666" class="Rootline"> | </font> 

Les elements de menu sont ici separes par une barre oblique, sauf pour le dernier element de 
menu. Pour inserer une barre oblique a la fin du menu, utilisez allWrap=/. 

La solution est d'utiliser la fonction optionSplit qui est disponible pour une serie de proprietes Reference 819809 

et de valeurs des objets de menu. optionSplit est utilisee principalement lorsque vous devez 

fixer des valeurs pour toute une serie d'elements. Pour les menus, la meme valeur est normale- 

ment definie pour plusieurs elements de menu. Si vous utilisez optionSplit, la valeur est ana- 

lysee par la fonction et, selon la definition, des valeurs differentes sont assignees aux elements. 

II est interessant a ce niveau-ci de remarquer que trois valeurs separees par la syntaxe |*| sont 

presentes dans la propriete allWrap. Le dernier element de menu n'est pas termine par une 

barre oblique. La syntaxe et les regies de priorite de cette fonction sont expliquees plus loin, a 

la section 5.1 1.1. 

# optionSplit: "/" apres chaque element sauf le dernier 

allWrap = |*| <font face= "Arial , Helvetica , sans-seri f , sans-seri f " size="l" colo 
r="#666666" class= " Rootline "> |   /  </ font> |*| |*| 
ATagBeforeWrap = 1 

} 

} 

Pour finir, voici le menu rootline a partir du gabarit TypoScript temp.Rootline_autoparser_ 
tswrap pour les sites « B2B » et « B2E ». Les elements de menu apparaissent sous la forme 
d'une liste numerique et sont mis en forme avec CSS. 



Figure 5.77: 
Le menu rootline 
indique le chemin de 
la page courante 
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temp . rootline_autoparser_tswrap = HMENU 

temp . rootline_autoparser_tswrap . special = rootline 

temp . rootline_autoparser_tswrap . special . range = 0 | — 2 

temp . rootline_autoparser_tswrap . 1 - TMENU 

temp . rootline_autoparser_tswrap . 1 { 

wrap = <ul> : :   | </ul> 

noBlur = 1 

NO { 

linkWrap- <li>|</li> 

# optionSplit: "/" apres chaque element sauf le dernier 
allWrap = |*| | &nbsp ; / Snbsp ; | * | |*| 

} 



Inserez les menus rootline et verifiez le resultat dans le frontend. 

A ce stade de la construction, I'application « BT3 » est presque complete. Tous les menus 
sont configures et integres. Seules quelques fonctionnalites manquent comme par exemple 
la version pour I'impression. Celles-ci seront ajoutees au chapitre suivant. En outre, d'autres 
cObjects y seront introduits, et les fonctions seront decrites plus en detail. 



5.1 1 TypoScript en detail 

5.1 1.1 La fonetion optionSplit 

Reference 819808 La fonetion optionSplit est disponible dans les proprietes TS dont le type de donnees porte le 
meme nom. El le est souvent utilisee dans les objets de menu. Cette fonetion permet d'assigner 
des valeurs differentes a des groupes d'elements faisant partie d'une serie. 

La syntaxe 

Les regies de base sont simples mais deviennent plus complexes lorsqu'elles sont eombinees. 
11 

Repartit les valeurs dans les zones principales, respectivement les zones Premiere, Me- 
diane et Derniere. 

II 

Divise les zones principales en trois sous-zones au maximum : premiere, deuxieme et 
troisieme. 

■ Les valeurs sont assignees dans I'ordre suivant : d'abord Derniere, puis Premiere et enfin 
Mediane. 

■ Si la valeur Mediane est vide (" "), la derniere partie de la Premiere va leu r est repetee. 

■ Si la Premiere valeur et la valeur Mediane sont vides, la premiere partie de la Derniere 
valeur est repetee avant la Derniere valeur. 

■ Les valeurs de la zone principale Mediane sont repetees. 
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Exemple : COLUMNS 

Le cObject COLUMNS permet de ereer un tableau a plusieurs colonnes avec du contenu. Cet 
objet admet entre autres la propriete gapBgCol du type de donnees HTML-color / stdWrap 
+optionSplit. El le determine une couleur d'arriere-plan pour les interstices entre les cellules de 
la table. En accedant a la fonction optionSplit, vous pouvez specifier des couleurs differentes 
pour certains interstices. 



COLUMNS: 

















HTML-odor/ IbBrtBraoretotottorthegaptabteCBto 

♦optKJOSpl't 





Figure 5.78: 
Grace au type de 
donnees, vous verifiez 
si optionSplit est 
disponible. 



Nous configurons rapidement ci-dessous une table a sept colonnes, done avec six interstices. 
Les propriet.es tableParams et totalWidth fixent respectivement les parametres de la balise 
<table> et la largeur, ici a 500 pixels. L'epaisseur des interstices et des lignes entre les colonnes 
est precisee dans gapWidth et gapLineThickness et le nombre de colonnes est fixe dans rows. 
Enfin, nous assignons du contenu aux differentes colonnes. 

10 = COLUMNS 
10 { 

tableParams = cellspacing- " 0 " cellpadding= " 0 " border- " 0 " 

totalWidth = 500 

gapWidth =30 

gapLineThickness = 1 

rows = 3 

gapBgCol = red 

1 = TEXT 

1. value = colonnel 
7 = TEXT 

7. value = colonne7 

} 



Nous voudrions attirer I'attention ici sur une propriete interessante qui utilise optionSplit, a 
savoir gapBgCol, qui a recu uniquement la valeur red jusqu'a present : tous les interstices sont 
done rouges (nous avons mis en evidence les couleurs dans les figures suivantes). 

Figure 5.79: 

colonnel ^Jcolonne2 J|colonne3 ^|colonne4 ^|colonne5 ^|colonne6 ^|colonne7 Valeur ' red 



Lorsque vous specifiez trois valeurs (une pour chaque zone principale) avec optionSplit : 

gapBgCol = red | * | green | * | yellow 



alors le premier espace est rouge, le dernier jaune et tous les autres prennent la meme couleur 
que I'espace median (regie 4). 
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Figure 5.80: 
Valeur : red | *| green 
|*| yellow 



colonnel 



|colonne2 



colonne3 ^Mcolonne4 



coloimeS I 



colonne6 colonne7 



La repetition de la valeur mediane (regie 4) est mieux percue si la valeur est divisee en sous- 
zones. 

gapBgCol - red | * | green | | fuchsia | * | yellow 

lei, nous avons choisi les eouleurs verte et fuchsia pour la zone mediane et elles seront done 
affichees en alternance. 



Figure 5.81: 
Valeur : red | *| green 
|| fuchsia |*| yellow 



colonnel 



olonne2 ^(colonne3 ^(colonne4 ^|c:>lonne5 ^(colonne6 | colonne7 

vert fuchsia vert fuchsia jaune 



Mediane 



Derniere 



Figure 5.82: 
Valeur : red \ \ aqua \ \ 
grey \ *\ green | *| 
yellow 1 1 fuchsia 



Figure 5.83: 
aqua \ \ grey | *| green 
|*| yellow || fuchsia \ \ 
aqua 



Les zones principales Premiere et Derniere sont a present subdivisees en plusieurs valeurs. La 
Premiere zone recoit trois valeurs, la zone Mediane une et la Derniere deux. 

gapBgCol = red | | aqua | | grey | * | green | * | yellow | | fuchsia 

Tous les interstices sont represented dans leur couleur correspondante : 



colonnel ^(colonne2 | colonne3 | 
rouge 



|colonne4 ^Jcolonne5 
vert 



colonne6 ^(colonne7 

fuchsia 



Fixez ensuite trois valeurs pour les zones principales Premiere et Derniere (ou reduisez le 
nombre de colonnes avec la propriete rows) : 

gapBgCol = red | | aqua | | grey | * | green | * | yellow | | fuchsia | | aqua 

Les zones principales sont traitees dans I'ordre defini precedemment pour determiner les eou- 
leurs a afficher; en effet, nous avons specifie sept eouleurs pour six interstices. D'abord les 
valeurs de la zone principale Derniere sont traitees, ensuite celles de Premiere et enfin celles 
de Mediane (regie l). La valeur de la zone principale Mediane n'est plus prise en compte, etant 
donne que tous les interstices ont deja ete definis par les zones Derniere et Premiere. 



colonnel 



| colonne5 



Derniere 



Si aucune valeur n'est assignee a la zone principale Mediane, 

gapBgCol = red | | grey | * | | * | yellow 

la derniere valeur de la zone principale Premiere est repetee (regie 2). Notez qu'il ne devrait 
pas y avoir d'espace entre les separateurs. Dans I'exemple, la valeur « grey » est repetee. 



324 



5.1 1 TypoScript en detail 



colonne 1 



'colonne2 



colonne4 



gris 



Hcolonne6 | c 



colonne7 



Repetition: derniere valeur la premiere zone 



Si les zones principales Premiere et Mediane ne contiennent pas de valeurs, la premiere valeur 
de la zone principale Derniere est repetee (regie 3). 



gapBgCol 



yellow | | fuchsia | [ aqua 



Figure 5.84: 
Valeur : red \ \ grey 
|*||*| yellow 



Dans I'exemple, les valeurs de la zone principale Derniere sont fixees en premier. Les interstices 
restants prennent la couleur jaune, comme la premiere valeur de la zone principale Derniere. 



colonne 1 | colonne2 | colonne3 | colonne4 | colonnej Hco 
Jaone Jaune jaune Jaune fuchsia 



colonne7 



Repetition: la premiere valeur de la derniere zone 



Derniere 



Figure 5.85: 
Valeur: |*||*| yellow 
1 1 fuchsia 1 1 aqua 



Nous avons deja utilise la fonction optionSplit pour les menus rootline des gabarits T5 temp, 
rootlinejitml et temp.rootline_autoparser_tswrap. Line caracteristique particuliere de cette 
fonction est qu'elle est appliquee a tous les objets du GIFBUILDER avant que les elements de 
menu ne soient crees. II en va de meme pour toutes les proprietes allWrap utilisees. 

temp . rootline_autoparser_tswrap . 1 . NO { 

# optionSplit: "/" apres chaque element sauf le dernier 
allWrap = |*| |   /  | * | |*| 

} 



La propriete allWrap recoit trois valeurs : 

■ La Premiere zone est vide |*|. 

■ La zone Mediane contient une valeur qui se repete, a savoir I'enveloppe |Etnbsp;/8tnbsp;|*|. 

■ La Derniere zone contient un espace vide : c'est pourquoi il y a un dernier separateur |*|. 
Sinon, les espaces vides au debut et a la fin de la ehame de caracteres seraient supprimes, 
conformement aux regies de TypoScript. 

La fonction optionSplit peut sembler plutot complexe a premiere vue, mais el le est aussi tres 
puissante, etant donne que vous pouvez assigner differentes valeurs a une serie d'elements 
sans aucune programmation supplementaire. Pour les menus, optionSplit est un outil dont on 
se passe difficilement. 

5.1 1 .2 Travailler avec des images et le GIFBUILDER 

Si TYP03 est installe avec les bibliotheques graphiques recommandees, vous pouvez mani- Reference 788778 
puler les images avec la fonction GIFBUILDER. Les menus graphiques en particulier les uti- 
lisent et creent automatiquement des images en format GIF a partir des elements de menu. 
Mais ils peuvent aussi produire des images a partir d'en-tetes combines avec des polices 
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de caractere. C'est de cette maniere que la disposition 5 des en-tetes pour les elements de 
contenu est creee, sur base du gabarit standard content (default) qui integre le gabarit de 
base styles.header.gfx1 . L'element de contenu Textbox fait aussi appel au GIFBUILDER. 

Objets GIFBUILDER (GifBuilderObj) 

Le GIFBUILDER comprend une serie de proprietes generales, par exemple XY, offset ou re- 
duceColors, pour definir respectivement la ta i I le de I'image, un decalage general pour tous les 
objets a partir du coin superieur gauche de I'image, et la reduction du nombre de couleurs 
de I'image GIF. Une zone de travail est creee dans I'image a I'aide de la propriete workArea. 
Les objets courants sont generes dans une liste numerique de GifBuilderObj. Soyez attentifs : 
dans TSref, les references a des objets sont fixees exclusivement pour les GifBuilderObj et non 
pour les cObjects du meme nom, comme TEXT et IMAGE. 

Les objets GIFBUILDER suivants peuvent etre utilises directement ou via d'autres GifBuilderObj : 
TEXT 

Le GifBuilderObj TEXT cree une image a partir de texte. Via le type de donnees stdWrap 
et getText, vous pouvez y faire reference separement. 

SHADOW 

En tant que GifBuilderObj, SHADOW est une propriete de TEXT qui cree un effet d'ombre. 
Si elle est utilisee seule, vous devez creer un lien a partir de I'objet TEXT auquel elle se 
refere, via textObjNum. 

EMBOSS 

Les memes remarques s'appliquent au GifBuilderObj EMBOSS. II cree deux copies deca- 
lees derriere I'objet TEXT afin de produire une sorte de relief. En utilisant les proprietes, 
vous pouvez leur donner differentes couleurs, les rendre plus douces ou plus transpa- 
rentes. 

OUTLINE 

Le GifBuilderObj OUTLINE est aussi une propriete de TEXT. II renforce les contours et est 
seulement influence par la valeur de la couleur et I'intensite. Le resultat n'est en general 
pas tres bon. II est preferable d'utiliser une ombre avec une forte intensite. 

BOX 

BOX cree un rectangle dont vous precisez la ta i I le et I'alignement. 
IMAGE 

Le GifBuilderObj IMAGE du type de donnees imgResource est associe a une image. 
Vous pouvez meme utiliser la fonction GIFBUILDER via laquelle tous les GifBuilderObj 
sont disponibles. 

EFFECT 

Avec EFFECT, il est possible d'effectuer une rotation sur I'image, de la renverser, de fixer 
les nuances de gris, de changer les valeurs gamma, etc. Les valeurs sont ajoutees avec la 
propriete value et separees avec la commande tube, « | ». 

WORKAREA 

Si vous inserez une nouvelle WORKAREA dans la liste numerique des GifBuilderObj, 
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les objets suivants feront reference a la nouvelle zone de travail (par exemple avec la 
propriete offset). 

CROP 

CROP restreint I'affiehage de I'image a des zones partielles. Ce GifBuilderObj adapte la 
workArea aux nouvelles dimensions de I'image. 

SCALE 

SCALE met les images a I'eehelle grace aux proprietes width et height. Ce GifBuilderObj 
adapte egalement workArea aux nouvelles dimensions de I'image. 

ADJUST 

ADJUST vous permet de corriger les valeurs des tons de I'image en definissant les valeurs 
des tons gris d'entree et de sortie. Si vous devez corriger les valeurs gamma, utilisez le 
GifBuilderObj EFFECT. Les proprietes sont reprises dans une liste via value et separees 
par le signe tube, « | ». 

[IMGMAP] 

IMGMAP n'est pas un GifBuilderObj, mais il est utilise conjointement avec TEXT pour 
creer une zone sensible (imagemap) pour un fichier GIF. II est utilise pour I'objet de 
menu IMGMENU. 



+calc 

Si vous ajoutez +calc au type de donnees d'une propriete du TSref, vous pourrez faire des 
operations a rithmetiquessur la valeur. Les operateurs utilises, +, -, / et* nesuivent pasde regies 
de priorite et sont traites dans I'ordre dans lequel ils sont ecrits. Toutefois, pour le GIFBUILDER, 
vous pouvez aussi vous referer aux valeurs d'autres objets. Cela permet par exemple de calculer 
la longueur et la largeur de la figure globale en fonction de GifBuilderObj comme TEXT ou 
IMAGE. 

XY = [100.w]+160 , [100.h]+5 

Pour les dimensions de I'image, cela signifie : 

XY = [largeur du GifBuilderObj 100] +160 Pixel , [hauteur du GifBuilderObj 
100] +5 Pixel 

.niceText 

La bibliotheque Freetype integree dans GDLib et utilisee par PHP ne supporte pas de maniere 
satisfaisante I'anti-aliasing dans toutes les versions. La propriete niceText aide a afficher plus 
clairement les petites lettres. El le fournit une solution de rechange en demandant a TYP03 de 
doubler la ta il le du texte sur un masque, avant de reduire I'eehelle jusqu'a la ta i I le correcte. 
Ce faisant, la fonction ImageMagick combine est utilisee pour placer (pour masquer) le texte 
dans I'arriere-plan. Cette procedure mobilise beaucoup de puissance de la part du serveur pour 
creer les images, mais procure un meilleur resultat selon la version d'lmageMagick utilisee. 
Puisque les images ne sont pas recreees a chaque appel, mais qu'elles le sont seulement apres 
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le premier appel qui suit I'effacement du cache, vous devez decider a quel endroit vous voulez 
utiliser niceText Notezque cette propriete peut produire differents resultatsselon les versions 
de GDlib, Freetype et ImageMagick utilisees, de sorte que votre menu graphique sur le serveur 
en ligne peut avoir une autre apparence que celui sur le serveur de production. 



Exemple : l'image dans l'en-tete 

Reference 016166 A la section « Etapes de construction avec des gabarits en cascade*, a la page 281, une 
image a deja ete inseree dans la zone d'en-tete du frontend. Le type d'objet IMAGE utilise 
accepte deux methodes d'integration d'images, grace a la propriete file du type de donnees 
img Resource. 

■ II fait reference a un fichier dans le systeme de fichiers via le champ Fichiers dans l'en-tete 
de la page. 

■ II utilise le GIFBUILDER, une fonction qui vous permet de creer une image qui combine 
plusieurs objets graphiques tels que des images, du texte ou des boTtes. 

La premiere methode a ete illustree dans le gabarit TS temp.header_html. 

L'utilisation de la fonction GIFBUILDER est illustree par le gabarit TS temp.GIFBUILDERJiea- 
der_image. Si vous voulez suivre et reconstruire I'exemple, vous le trouverez dans le Dossier 
Systeme Gabarits Principaux/cObjects. 

L'en-tete ne doit pas seulement comprendre l'image incluse dans les en-tetes de page, comme 
c'etait le cas jusqu'ici, mais aussi inclure le titre de la page courante sous forme de graphique. 
Le texte est ombrage et la premiere lettre est mise en couleur. 



Figure 5.86: 
Inclusion du 
graphique comme un 
objet GIFBUILDER 




D'abord, creez un objet temporaire defini comme un cObject IMAGE. Par la propriete file du 
type de donnees imgResource, une nouvelle image est creee avec la fonction GIFBUILDER. 

temp . header_image_gif builder = IMAGE 

temp . header_image_gif builder . file = GIFBUILDER 

La taille de l'image est determinee avec XY. 

temp . header_image_gif builder .file { 
XY = 588, 125 

L'objet 10 de la liste numerique du GifBuilderObj est du type IMAGE et prend en argument 
les images assignees a partir du champ Fichiers de l'en-tete de page. Le parametre slide lance 
une recherche dans I'arborescence des pages a partir de la page courante jusqu'au niveau 1. 
Cette recherche s'arrete des qu'une image a ete trouvee. 

10 = IMAGE 

10 . file . import = uploads /media/ 

10 . file . import . data = levelmedia : 1 , slide 
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Determinez la position de I'objet 10 avec la propriete offset qui prend comme reference le coin 
superieur gauche de I'image globale (alternativement, si workArea est active, c'est la zone de 
travail qui est prise en reference). 

10. offset = 199,0 

Ensuite, la premiere lettre jaune du titre de la page est creee. Definissez I'objet 1 8 comme un 
GifBuilderObj de type TEXT. Sa propriete text est du type de donneesstdWrap et essaie d'abord 
de lire le sous-titre de la page via text.field = subtitle. S'il n'y en a pas, c'est le titre qui est lu. 

18 = TEXT 

18. text. field = subtitle // title 

Les proprietes case et crop precisent respectivement que le texte sera ecrit en majuscules et 
que seule la premiere lettre sera affichee. 

18. text. case = upper 
18. text. crop = 1 

L'objet 18 est place dans la figure globale avec decalage; il recoit une taille et une couleur 
pour la police de caractere. 

18. offset = 62,90 

18.fontSize = 40 

18. fontcolor = #FFCC33 

La propriete niceText ameliore la reproduction des polices de caractere. 

18.niceText = 1 

Le GifBuilderObj TEXT accede au GifBuilderObj EMBOSS via la propriete emboss. Les deux 
copies de la lettre sont decalees d'une valeur specifiee par offset ; blur les adoucit et opacity 
en controle la transparence. 

18. emboss { 

highColor = #FFCC33 
lowColor = #FFCC33 
offset = 2,2 
blur =99 
opacity = 50 

} 

De meme, le texte entier est genere dans I'objet 20. 

20 . text . field = subtitle // title 

20. offset = 75,85 

20.fontSize = 20 

20. fontcolor = #333333 

2 0. niceText = 1 

lei, le GifBuilderObj TEXT accede au GifBuilderObj SHADOW via shadow et produit une ombre 
argentee. El le est en decalage par rapport au coin superieur gauche de I'objet 20, via offset. 
Elle est adoucie par blur, est mise a un niveau de 60% de transparence par opacity, et son 
intensite est definie par intensity. 
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20. shadow { 

color = silver 
offset = 7,8 
blur =70 
opacity = 6 0 
intensity = 15 

} 

} 

Bien sur, vous pouvez etendre I'exemple comme vous I'entendez. Avec la propriete mask du 
GifBuilderObj IMAGE, un masque noir et blanc est applique sur I'image. 

Figure 5.87: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^h 

Masque place sur m m , ' 

I'image ^^^^^^^^^^^^^^^^^^^^^^^^^^^m 



Ajoutez la ligne suivante a la configuration TypoScript : 

10 .mask = f ileadmin/mediapool /material_intern/gif builder-mask . png 

Seules les parties de I'image couvertes par les zones blanches du masque sont visibles pour 
I'objet GIFBUILDER 10. Les zones noires sont done invisibles. 

Figure 5.88: 
L'image de I'en-tete 
avec le masque 

Accuell 



Comme variante, vous pouvez ajouter un nouvel objet GIFBUILDER (I'objet 15). C'est un Gif- 
BuilderObj du type IMAGE qui cree une image avec I'aide de la fonction GIFBUILDER. La pro- 
priete XY permet de preciser a nouveau la ta il le de I'image et I'objet GIFBUILDER 100 prend en 
argument le chemin vers I'image dans le systeme de fichiers. 

Figure 5.89: 
L'image presente le 
logo TYP03 sur un 
fond gris 

15 = IMAGE 

15. file = GIFBUILDER 
15. file { 

XY = [100.w]+160 , [100.h]+5 

100 = IMAGE 

100. file = fileadmin/mediapool/material_intern/typo31ogo.gif 

La propriete offset permet de determiner la position du logo dans notre image. 
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100. offset = 160, 5 

L'arriere-plan de I'image est rendu transparent avec transparentBackground = 1. Le meme 
resultat est obtenu via transparentColor = #CCCCCC avec la valeur de la couleur grise du 
logo. 

transparentBackground = 1 
transparentColor = #CCCCCC 

} 

Le logo TYP03 est done parfaitement integre a I'image de I'en-tete. 



Vous pouvez remarquer qu'il n'y a pas de limites a I'utilisation de la fonction GIFBUILDER. En 
fin de compte, la limite, e'est votre ereativite. 

5.1 1 .3 La fonction stdWrap 

La fonction stdWrap joue un role central dansTypoScript et reflete aussi le concept deTS. Nous 
I'avons deja beaucoup utilisee dans les exemples. Cette fonction s'est developpee a partir du 
concept d'enveloppe pour pallier au fait que TypoScript ne peut pas manipuler les structures 
de controle (sauf pour les conditions), puisque ce n'est pas un veritable langage de program- 
mation. 

stdWrap, une sorte de « canif Suisse », propose au developpeur TypoScript une serie de pro- 
prietes et de fonctions pour fournir des donnees, changer ou editer des elements de contenu 
ou encore pour permettre de traiter des conditions. 

Les proprietes et les fonctions de stdWrap sont utilisables partout ou une propriete d'objet du 
type de donnees stdWrap est definie. Les objets ont aussi frequemment une propriete nommee 
stdWrap qui rend disponible cette fonction. 

Selon leurs finalites, les proprietes de stdWrap sont separees en trois zones : Get data, Over- 
ride/Conditions et Parse data. Notez que les proprietes sont traitees dans I'ordre dans lequel 
elles sont reprises dans TSref. 



La zone Get data des proprietes est utilisee pour rendre disponibles les donnees ou pour les 
publier. Cela peutservir pour le titre d'une page, la date courante, un cObject, un nombre de 
lignes dans une requete de base de donnees, une liste de fichiers dans un repertoire ou une 
variable globale. Les proprietes les plus importantes sont data, field, current, cObject etfilelist. 



Figure 5.90: 
Combinaison de 
plusieurs images 




Get data 
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data 

Affiche, via la syntaxeType:pointeur, les valeurs de differents tableaux PHP comme, par 
exemple, des enregistrements de donnees. 

Exemple : ... .data = page:title 

field 

Renvoie generalement sous forme de valeur les elements de contenu d'un champ de la 
base de donnees a partir de I'enregistrement courant de donnees. 

Exemple : ... .field = title 
current 

Determine, par le biais d'une valeur booleenne, I'acces au contenu actuel du registre des 
donnees. DansTYP03, le registre des donnees est un tampon interne oil sont stockees les 
valeurs courantes pour certaines fonctions. Les variables enregistrees a cet endroit sont 
disponibles globalement et sont publiees, sauvees ou ecrasees a differents moments du 
traitement. 

cObject 

Charge le contenu d'un objet de contenu. 
Exemple : ... .cObject = IMAGE 

filelist 

Lit un repertoire de fichiers et fournit une liste de fichiers. Les parametres suivants sont 
separes par le signe tube | : 



1. Chemin 

2. Liste delimitee par des virgules (sans espace) des types de fichiers possibles (gif, 
jpg,...) 

3. L'ordre du tri : name, size, ext, date 

4. r inverse l'ordre du tri 

5. Si active (non vide), la liste de fichiers est creee avec le chemin complet et done 
pas uniquement avec le nom du fichier 

Exemple : ... .filelist = fileadmin/img/|jpg,png|name| 1 1 

Une aide supplemental est fournie par la publication dans le frontend de la liste de 
I'enregistrement courant des donnees, via la propriete stdWrap debugData. 
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$cObj->data: 



uid 



tstamp 

; o rti n g 

deleted 

perms_userid 

perms_groupid 

perms_user 

perrris_group 

perms_everybo 

crdate 

cruser_id 

title 

doktype 

TSconfig 

tree Stop 



author 




author email 




nau title 




co nte nt_f ro m_p i d 


0 


mount_pid 


0 


alias 




nau hide 


0 


mount_pid — ol 


0 


currentValue_kidjls9dksoje 


index. php?id = 18 



Override/Conditions 

Les proprietes danscette zonesont utilisees pour ecraser et comparer des valeurs. Vous pouvez, 
entre autres, fixer une nouvelle valeur qui depend d'autres valeurs. Les proprietes les plus 
importantessont : 

override 

Ecrase la valeur d'un objet si la valeur de override n'est pas vide « » ou 0. La question 
de savoir si I'objet original a deja une valeur assignee ou s'il est vide n'est pas pertinente 
dans ce cas. 

if Empty 

Assigne une nouvelle valeur a un objet si eette valeur est vide jusqu'a present « ». Le 
zero est iei traite comme une valeur. 

listNum 

Extrait la valeur desiree des elements de contenu qui sont separes par une virgule. 

trim 

Supprime les espaees vides, les tabulations et les sauts a la ligne. 



v 



is 



1087374477 



128 



31 



27 



1081438117 



Figure 5.91: 
Affichage de 
I'enregistrement 
eourant de donnees 
dans le frontend 
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required 

Si la valeur courante est vide « », I'objet faisant I'appel a stdWrap est retourne en I'etat. 
Les proprietes stdWrap qui suivent ne sont pas prises en consideration. 

if 

Inclut la fonction if du meme nom. Est utile pour verifier si une ou plusieurs conditions 
sont satisfaites dans le but de fixer certaines valeurs. 

fieldRequired 

Si le champ de I'enregistrement actuel de donnees est vide, la valeur courante est sup- 
primee. 



Parse data 

La zone Parse data determine des proprietes pour le traitement des donnees. Toute une serie 
d'operations sont disponibles ici. Le contenu HTML peut etre filtre par la fonction HTMLparser, 
et certaines balises supprimees. Avec split, les elements de contenu sont divises en plusieurs 
valeurs sur base de caracteristiques precises avant d'etre traites. D'autres fonctions qui sont 
incluses via des proprietes sont encapsLines, addParams, textStyle, tableStyle, filelink et ty- 
polink. 

Get data et Parse data 

field et data ont deja ete utilisees dans les exemples precedents en tant que proprietes std- 
Wrap de la zone Get data. 

field 

Avec field, le sous-titre ou le titre des pages 

NO { 

10 = TEXT 

10. text. field = subtitle // title 

ou encore une image du champ Fichiers de I'en-tete de page sont lus pour etre inseres dans 
les menus. 

NO { 

# Lire 1 ' image de la page 
beforelmg. import = uploads /media/ 
beforelmg . import . field = media 

data 

La propriete data est utilisee pour selectionner I'image, non seulement dans la page courante, 
mais aussi pour toutes les pages du rootline, jusqu'au moment oil une image est trouvee a un 
niveau superieur. 
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temp . header_image = IMAGE 

temp. header_image . file . import = uploads /media/ 

temp. header_image . file . import . data = levelmedia : 1 , slide 



Les proprietes de I'objet stdWrap de la zone Parse data ont deja servi dans les premieres etapes 
de la section 5.2. Cet exemple simple affiche le texte en majuscules a I'aide de la propriete case : 



Exemple : version pour l'impression 

Dans I'application exemple, la version pour l'impression manque. Vous devriez rajouter un bou- 
ton qui optimise la page courante en vue de son impression. La mise en page n'est pas prise 
en compte dans la version pour l'impression, seul le contenu est mis en forme suivant les 
styles CSS. La page est appelee avec le parametre URL fttype=98 qui correspond en interne 
au nombre typeNum=98 reserve pour l'impression. Afin de creer le lien vers I'apercu avant 
impression, utilisez les proprietes des zones Get data et Parse data de I'objet stdWrap. 



Creez un nouveau gabaritTS. Dans les exemples, vous le trouverez sous I'appellation temp. print- 
version dans le Dossier Systeme Gabarits Principaux/Fonctions. Le bouton d'impression est 
genere et nous definissons une page qui restituera le resultat correspondant. 

Creez d'abord un cObject temporaire de type COA. 

temp.printversion = COA 
temp.printversion { 

Le bouton est cree avec la propriete wrap appliquee a I'ensemble de I'objet. 

wrap = <a href="|" name= " Printversion" title= " Printversion" target="_blank" clas 
s="printversion" >$printlabel</a> 

Toutefois, I'URL contenant le parametre &type=98 n'est pas encore reliee au bouton. Dans ce 
but, la propriete 10 de la liste numerique du COA a ete definie comme un cObject TEXT. 



Les proprietes stdWrap, qui sont des outils du cObject TEXT, sont directement appliquees a la 
base de I'objet, ce qui ne correspond pas au comportement standard des autres objets. Afin 
d'obtenir I'URL de la page courante, c'est la propriete data qui est utilisee. 



Figure 5.92: 
Le bouton 

d'impression appelle 
la page avec le 
parametre & type=98 



page. 10 = HTML 

page . 10 .value = kasper 

page . 10 .value . case = upper 




TEXT 
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La propriete est du type de donnees getText, ce qui signifie qu'elle peut affieher les valeurs de 
differents tableaux, aecessibles par le systeme en utilisant la syntaxe Type:pointeur. 

Reference 293098 L'adresse eourante est determinee par le type getlndpEnv et le pointeur REQUEST_URI. 

10. data = getlndpEnv :REQUEST_URI 

Le tableau contient des lors une valeur telle que /index.php?id=18. El le peut etre encore traitee 
par la propriete wrap afin d'ajouter le parametre &type=98. 

10. wrap = |&type=98 

Reference 463307 Notez qu'il s'agit ici d'un simple exemple de creation du lien vers les versions d'impression. Si 
vous utilisez I'option TS config.simulateStaticDocuments, cet exemple et le suivant, ne fonc- 
tionneront pas - ces derniers sont uniquement destines a mettre en evidence les proprietes 
stdWrap. Une extension permettant de creer des liens correctement est disponible dans le TER 
(Typo3 Extension Repository). 

Une autre possibility est d'utiliser la propriete split El le vous permet de diviser la valeur en 
plusieurs parties via les proprietes de la fonction du meme nom 9 . 

10.split.token=/ determine la chame de caracteres a utiliser comme separateur. /index.php?id 
= 18 est divise en deux valeurs. La premiere est vide et la seconde contient la chame de ca- 
racteres qui suit le separateur : index.php?id=18. L'objet lO.split.cObjNum du type de donnees 
cObjNum +optionSplit sert de pointeur vers les cObjects d'une liste numerique. 

Ces objets (1,2,3,...) sont appeles pour traiter les valeurs separees par optionSplit cObjNum 
determine quels objets sont appeles pour chaque valeur separee. Si cObjl\lum=1, chaque valeur 
separee est passee a l'objet 1 pour le traitement. 

Vous pouvez aussi utiliser optionSplit pour traiter chaque valeur separee par un objet different. 
Le mode de fonctionnement exact de optionSplit est explique a la section 5.11.1. Dans la 
configuration suivante, l'objet 2, qui ajoute le parametre type a partir de la valeur separee 
avec current=1, est appele uniquement pour la derniere valeur (index.php?id=18. Toutes les 
autres valeurs separees sont traitees par l'objet 1, qui fixe une valeur vide avec override=. 

/* Variante 2: traitement par la fonction split 
10 . split . token = / 

lO.split.cObjNum = 1 |*| 1 |*| 2 

10 . split . 1 . override = 

10 . split . 2 . current = 1 

10. split. 2. wrap = |&type=98 

*/ 

} 

Le resultat est identique a celui de la premiere variante, qui est plus courte. 

Vousdevez a present definir le gabarit pour I'affichage de la page dans son format d'impression 
avec typeNum=98. La selection de gabarits par I'utilisation de type/typeNum a ete vue a la 
section 5.8. 

9 Ceei n'a pas de sens dans ee contexte, puisqu'une seule valeur est traitee ; nous I'utilisons ici uniquement pour 
explieiter la fonction split 
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# un autre gabarit de page pour le type 98 (=version impression) 
alt_print = PAGE 
alt_print { 
typeNum =98 

La CSS suivante determine le format de I'affichage. 

CSS_inlineStyle = body, p, hi, h2 , h3 , h4 { font-family: Arial, Verda 
na, sans-serif; font-size: llpt; } hi, h2 , h3 , h4 { font-size: 12pt; fo 
nt-weight: bold; } 

Pour finir, le contenu de la colonne Normal est publie. 

10 < styles . content .get 

} 

Override/Conditions 

Comme nous I'avons fait remarquer au debut, il est possible de lier les proprietes a des condi- 
tions. Les proprietes stdWrap qui ecrasent les valeurs ou fixent les conditions ont deja servi 
dans les exemples. 

listNum 

Pour le menu temp.metas_html qui reprend I'information meta, la premiere image du tableau 
a ete parametree avec la propriete listNum=0 lorsque les images etaient lues a partir de I'en- 
tete de page. Meme s'il y a plusieurs images dans le champ Fichiers, seule celle-ci est affichee. 

NO { 

beforelmg . import = uploads/media/ 
beforelmg . import . field = media 
beforelmg . import . listNum = 0 

if Empty 

Pour la mise en page de base du gabarit TS ts CTABLE template, un espace vide ( ) a ete 
passe en argument dans la propriete ifEmpty pour que le tableau soit toujours affiche meme 
s'il ne possede pas de contenu. 

page. 3 0 = CTABLE 
page .30 { 

c.10 = COA 
c.10.5 = HTML 

c. 10. 5. value = <table border="0" cellspacings " 0 " cellpadding= " 0 " widths 
"586"><tr> 

c.10.10 < styles . content . get 

c. 10. 10. wrap = <td align-"left" valign= " top"> | <br /xbr /></td> 
c.10.25 = HTML 

c . 10 . 25 .value = </trx/table> 
c . 10 . stdWrap . ifEmpty =   
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Exemple : utilisation de deux colonnes 

Jusqu'a present, seul le contenu de la colonne Normal eta it affiehe dans les gabarits princi- 
paux. II n'y a que le gabarit TS ts wrap template qui eta it inclus dans la colonne Right de la 
disposition de base. Une solution pour inserer du contenu dans une deuxieme colonne est la 
suivante : creer deux gabarits TS differents inclus dans I'arborescence des pages et les utiliser 
selon les besoins. Puisque certaines pages ne sont pas publiees en deux colonnes, nous avons 
besoin d'une solution plus flexible, qui cree la zone de droite dans le gabarit seulement si les 
elements de contenu existent vraiment. 

Nous allons presenter cette solution a I'aide du gabarit TS auto parser template. Pour ce fa ire, 
nous creons plusieurs objets dans le chemin d'objet temp*. D'abord, I'objet styles.content.get 
est copie dans temp.inhalt pour rechercher les elements de contenu de la table tt_content 
dans la colonne Normal (colPos=0). 

# contenu de gauche 
temp.inhalt < styles.content.get 

Le second objet temporaire, temp.rechts, affiehe les elements de contenu de la colonne Droite 
(colPos=2) avec I'objet styles.content.getRight. 

### contenu de droite ### 

temp. right < styles.content.getRight 

La propriete stdWrap.required force I'arret du traitement de stdWrap si I'objet n'a produit 
aucun contenu : dans ce cas, le contenu de la colonne de droite. S'il y a du contenu dans la 
colonne de droite, il est entoure par une balise <div> pour le disposer sur la page en utilisant 
la propriete stdWrap innerWrap. 

temp . right . stdWrap . required = 1 

temp . right . stdWrap . innerWrap = <div id= " right " xdiv id= " content_right " > | 
</divxdiv id-"rightfooter"x/div> </div> 

Le contenu de la colonne Normal est place devant cela avec la propriete preCObject et est 
enveloppe d'une balise <div>. 

# placement du contenu de gauche en tant que cObject avant le contenu de droite 
temp . right . stdWrap .preCObject < styles.content.get 

temp . right . stdWrap .preCObject .wrap = <div id= " content_lef t " > | </div> 

La configuration temp. right definit un objet qui affiehe les elements de contenu des colonnes 
Normal et Droite, pourvu que du contenu soit present dans la colonne de droite ; sinon, rien 
n'est affiehe. La colonne Normal est parametree ici avec I'lD contentjeft au lieu de content 
dans la balise <tag>, ce qui signifie que la colonne peut etre configuree plus finement par CSS 
que pour un affichage en une seule colonne. 

L'objet temp.inhalt est remplace par temp. right s'il y a du contenu dans la colonne de droite. 
On realise cela avec la propriete stdWrap override. 

La propriete override est elle-meme du type de donnees string/stdWrap et peut done afficher 
une chaine de caracteres ou des donnees via les proprietes du groupe de fonctions Get Data 
de stdWrap. 
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temp . inhalt . stdWrap. override . cObj ect < temp. right 



Le contenu de I'objet temp.inhalt est finalement copie dans la sous-partie. 



temp.mainTemplate = TEMPLATE 
temp.mainTemplate { 



} 



subparts . content < temp.inhalt 



La mise en page qui en resulte comporte deux zones de contenu s'il y a du eontenu dans la 
colonne Droite. 
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Figure 5.93: 
Affichage dans /e 
frontend 



Vousvoyez que la fonction stdWrap est un outil puissant pour lire le contenu, pour construire 
des structures de controle de eomparaison, et enfin pour traiter le contenu. S'il vous manque 
des fonctionnalites, vous avez la possibility de traiter le contenu avec vos propres fonctions 
PHP, via les proprietes preUserFunc et postUserFunc. 



5.1 1 .4 Conditions 

Nous avons deja introduit les conditions. El les doivent etre satisfaites pour que le code TS qui 
les suit soit pris en compte. Elles constituent une autre structure de controle. Rappelez-vous 
que si plusieurs conditions sont verifiees, seule la premiere condition satisfaite est prise en 
compte. Les conditions se terminent par [END] ou [GLOBAL]. Elles ne peuvent apparaTtre a 
I'interieur d'un operateur { } qui represente I'emboitement de proprietes. La condition [ELSE] 
est forcement remplie si la condition qui la precede ne Test pas. 



Reference 315080 
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Vous pouvez aussi combiner les conditions, comme dans I'exemple suivant, oil le code TS est 
traite uniquement si le systeme appelant peut s'identifier comme etant un systeme Linux, ou 
si son IP est du type 145.153.102*. 

[system = linux] [IP = 145.153.102.*] 
[END] 

Nous n'avons pas encore utilise de conditions dans nos exemples. Nous commencons done 
par presenter les conditions reprises dans la derniere version de TSref avant d'indiquer par un 
exemple comment on les met en pratique. 

Vue d'ensemble 

Reference 501292 La vue d'ensemble qui suit reprend toutes les conditions que vous pouvez utiliser. Les valeurs 
exactes se trouvent dans TSref. 

browser 

Syntaxe : [browser =navigateur1, navigateur2,...] 

[browser = msie] s'applique a toutes les versions de MS Internet Explorer 

[browser = msie, opera] s'applique a tous les navigateurs MS Internet Explorer et 

Opera 

[browser = opera7] s'applique a tous les navigateurs Opera 7.xx dont, par exemple, 
Opera 7.1. 

Notez que les navigateurs peuvent etre identifies sous d'autres noms, de sorte que la 
requete ne mene pas alors au resultat desire. 

version 

Syntaxe : [version =value1 ,>value2 ,=value3 ,<value4,...] 

Cette condition concerne la version du navigateur. Les valeurs sont des nombres a vir- 
gule flottante avec « . » comme separateur decimal. Les trois operateurs suivants s'ap- 
pliquent a la valeur de la version : = La valeur doit correspondre exactement. [version 
= 5.5] 

> La numero de la version doit etre plus grand que la valeur precisee. [version = > 
5.5] 

< Le numero de la version doit etre plus petit que la valeur precisee. [version = < 5.5] 
system 

Syntaxe : [system=system1 .system 2 ] 

La ehame de caracteres est comparee a la premiere partie de I'identification du systeme 
d'exploitation, et on considere que la condition est vraie s'ils correspondent, 
[system = win9] correspond a Win95 et Win98. 

[system=win,mac] correspond aux systemes d'exploitation Windows et Mac. 

device 

Syntaxe : [device=device1,device2 ] 

La condition est vraie si la chaine de caracteres correspond au materiel accedant au site 
(pda, wap, grabber, robot). 
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useragent 

Syntaxe : [useragent=agent ] 

Pour verifier s'il y a uneeorrespondanceavec les variables getenv("HTTP_USER_AGENT"). 
L'asterisque * peut etre utilisee au debut et/ou a la fin de la ehame de caracteres. 
[useragent=Lotus-Notes/4.5(Windows-NT)] correspond a HTTP_USER_AGENT « Lo- 
tus-Notes/4.5(Windows-NT) ». 
[useragent = Lotus-Notes*] y correspond egalement. 

language 

Syntaxe : [language =lang1,lang2,...] 

La variable getenv(HTTP_ACCEPT_LANGUAGE) est comparee avec une valeur donnee ; 
la condition est vraie si la correspondance est verifiee dans son ensemble. 

IP 

Syntaxe : [IP =ipaddress1,ipaddress2,...] 

La variable getenv(REMOTE_ADDR) est comparee a la valeur donnee. Cette derniere 
peut contenir le symbole * ou consister en une, deux ou trois parties : 
[IP = 145.*.*.*] correspond a toutes les adresses IP qui commencent par 145. 
hostname 

Syntaxe : [hostname =hostname1,hostname2,...] 

La valeur qui s'ecrit sous forme d'une liste de noms de domaines, separes par des vir- 
gules, doit correspondre a la variable getenv("REMOTE_HOST"). Le symbole * est permis, 
mais ne peut etre utilise dans une chaine de caracteres. 
[hostname = votredomaine.*.com] est correct, 
[hostname = votredomaine*.com] est errone. 

hour 

Syntaxe : [hour =heure1,>heure2,<heure3,...] 

Les valeurs (0-23), separees par des virgules, sont eomparees a I'heure sur le serveur. 
Les operateurs possibles sont =, > et <. 

minute 

Syntaxe : [minute =...] 

La minute specifiee (0-59) est comparee a la minute sur le serveur. 

dayofweek 

Syntaxe : [dayofweek =...] 

Le jour de la semaine (de O/dimanche a 6/samedi) est compare au jour de la semaine sur 
le serveur et la condition renvoie « vrai » si les deux correspondent. 

dayofmonth 

Syntaxe : [dayofmonth =...] 

Le jour du mois (1 a 31) est compare au jour sur le serveur. 

month 

Syntaxe : [month =...] 

Les mois (de 1/janvier a 12/decembre) sont compares au mois sur le serveur. 
usergroup 

Syntaxe : [usergroup =groupe1-uid,groupe2-uid,...] 
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La condition est satisfaite si I'utilisateur identifie dans le frontend est un membre du 
groupe d'utilisateurs specifie. Le symbole * couvre tous les groupes d'utilisateurs confi- 
gures, specifies par la variable globale g r I ist. 

loginUser 

Syntaxe : [loginUser =fe_users-uid, fe_users-uid,...] 

L'uid d'un utilisateur frontend identifie est compare avec le nombre entier donne. Le 
symbole * est utilise pour savoir si I'utilisateur est bel et bien identifie. 

tree Level 

Syntaxe : [treeLevel =niveau1,niveau2,...] 

Si I'un des nombres entiers donnes correspond au niveau actuel dans le rootline, alors 
la condition est remplie. 0 correspond au Rootlevel, 1 correspond au premier niveau de 
menu. 

[treeLevel = 2,3] 

PIDinRootline 

Syntaxe : [PIDinRootline =pages-uid,pages-uid,...] 

La condition est satisfaite si la page actuelle correspond a I'un des pid specifies ou si 
I'une de ses sous-pages est impliquee. C'est seulement dans ces cas que le code Typo- 
Script qui suit est execute. Si vous souhaiter assigner une valeur de couleur differente 
aux en-tetes dans differentes zones de I'arborescence des pages, utilisez le code suivant : 

[PIDinRootline = 37] 

content. wrap. header 1 = <hl class= "bleu " > | </hl> 
[END] 

[PIDinRootline = 16] 

content. wrap. header 1 = <hl class= " rouge "> | </hl> 
[GLOBAL] 

L'en-tete de la page 37 et ses sous-pages sont en bleu, la page 1 6 et ses sous-pages en 
rouge. 

PIDupinRootline 

Syntaxe : [PIDupinRootline =pages-uid,pages-uid,...] 

Voir PIDinRootline. La difference reside en ce que I'lD de la page actuelle n'est pas repris 
dans la comparaison. 

globalVar 

Syntaxe : [globalVar=var1=valeur,var2<valeur2,var3>valeur3,...] 

La condition est remplie si la valeur de la variable correspond a la valeur des variables 
systeme. Les variables sont separees par des virgules. 
Les operateurs possibles sont : >, <. 

[globalVar = GP:L=3] s'applique par exemple a I'URL ...index.php?id=45&L=3. 
globalString 

Syntaxe : [globalString=var1 =valeur,var2=*valeur2,var3=*valeur3*,...] 

Idem que globalVar sauf que les valeurs sont comparees en tant que chames de ca- 

racteres. Le symbole * peut etre place au debut ou a la fin. 

[globalString = HTTP_HOST=www.monsite.com] et [globalString = HTTP_H0ST=*. 
monsite.com] correspondent tous les deux a la valeur http://www.monsite.com. 
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userFunc 

Syntaxe : [userFunc =user_match(checkl_ocallP)] 

Avec userFunc, vous utilisez vos propres fonctions PHP pour la verification. 

Exemple : etendre la version pour l'impression 

Le bouton que nous avons utilise jusqu'a present dans le gabarit TS temp.printversion pour 
appeler la version pour l'impression fonctionne tres bien, mais uniquement tant que vous ne 
creez pas d'adresses URL statiques avec I'option TS config.simulateStaticDocuments. 

C'est pourquoi le gabarit est etendu ci-apres. La chaine de caracteres est editee et recoit 
differents parametres selon le type d'URL. 

Pour I'objet existant temp.*, I'objet 10 est d'abord reconfigure pour les adresses URL statiques. 

temp.printversion = COA 
temp.printversion { 

wrap = <a href-"|" name- " Printversion" title- " Printversion" target- 
"_blank" class- "printversion" >$print label </a> 

# simulateStatic Version, tous les liens inclus 

# seront aussi traites. 
10 = TEXT 

10. data = getlndpEnv : REQUEST_URI 

L'URL affichee via la propriete stdWrap est divisee en chalnes de caracteres par la propriete 
NstNum.splitChar et sa valeur « . ». En posant listNum=0, seul le premier element de la va- 
leur est pris en compte et il est enveloppe par |.98.html. (Le tout fonctionne si vous avez 
inclus les parametres avec config.simulateStaticDocuments_pEnc_onlyP en tant que valeur 
de hachage MD5 lorsque vous avez cree I'adresse URL statique.) 

lO.listNum.splitChar = . 

lO.listNum = 0 

10. wrap = | .98.html 

} 

L'objet temp.printversion. 10 deja existant est soumis a une Condition et n'est traite que si 
celle-ci est verifiee. 

globalString verifie si la variable du serveur ENV:REQUEST_URI contient la valeur /index.php* 
Le symbole * sert a verifier la chame de caracteres juste pour la valeur de depart /index.php. 

# version "normale", pour les pages contenant index.php, avec les parametres si 

# necessaire, par exemple : ?id=3434&L=l 
[globalString = ENV : REQUEST_URI = /index.php*] 

Si la condition est remplie, I'objet actuel temp.printversion. 10 est supprime et redefini, comme 
dans la version precedente. 

temp.printversion. 10 > 
temp.printversion { 
10 = TEXT 

10. data = getlndpEnv :REQUEST_URI 
10. wrap = |&type=98 

} 



343 



5 TypoScript 



La condition se termine avec [global]. 

[global] 

Le gabarit de la page reste inchange. La version pour I'impression peut a present etre utilisee 
dans les deux versions. 

Exemple : selection de la langue 

TYP03 eonvient tres bien aux applications multilingues. Nous avons deja montre comment 
le redacteur s'acquitte dans le backend de la maintenance du contenu en plusieurs langues. 
Celles-ci devraient maintenant pouvoir etre selectionnees dans le frontend via un lien qui 
appelle la page par le parametre &L=[sys_language_uid], lien devant lequel est place un petit 
drapeau representant la langue a choisir. 



Figure 5.94: 
Changement de 
langue : « Franeais » 
est aetif, « English » 
peut etre ehoisi (a 
gauche) et vice versa 
(a droitej 



■ English Version 

PRODUIT 1 
premiere page 
deuxieme page 
troisieme page 
quatrieme page 

produit 2 



U Version francaise 

PRODUCT 1 
first page 
second page 
third page 
fourth page 

product 2 



Ceci est mis en pratique via un script PHP, mais peut se faire plus simplement en TypoScript. 

Dans le setup du nouveau gabarit TS temp. language, le franeais est defini comme etant la 
langue par defaut (sys_language_uid=0) via la propriete language=fr du TLO config. 

config . sys_language_uid = 0 
config . language = fr 

Si I'URL contient le parametre L=1, la langue dont I'lD est 1 (sys_language_uid=l), I'anglais 
dans notre cas, est definie comme etant la deuxieme langue. Puisqu'il ne s'agit pas d'une 
definition globale, la donnee GET/POST est verifiee par la condition [globalVar=GP:L=l]. 

# Langue anglaise, sys_language . uid = 1 

[globalVar = GP:L = 1] 

config . sys_language_uid = 1 

config . language = en 

[global] 

Le lien effectif est defini comme un objet temporaire via le cObject COA. L'objet 10 de type 
d'objet TEXT fournit une langue alternative qui depend de la langue courante. C'est pourquoi 
value est une constante. Un tableau qui met en forme I'affichage est place autour de I'en- 
semble de l'objet avec la propriete stdWrap outerWrap. Cette derniere contient le drapeau de 
la langue alternative, qui est aussi une constante. 
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temp, language = COA 
temp, language { 
10 = TEXT 

10. value = { $languageVersion} 

lO.outerWrap = <table width- " 160px" bgcolor- " #FFFFFF " border-"0" cellpadding- " 1 " 
cellspacing- " 0 " xtrxtd width- " 12px" ximg src- " clear . gif " width-"10px" height-"26p 
x" alt-"" /x/tdxtd width-"16px"ximg src- " {$f lagSmall} " width-"14px" 
height^ " llpx" border="0" /x/tdxtd widths " 17 Opx" > | </tdx/trx/table> 

La propriete stdWrap typolink permet d'afficher I'objet 10 sous forme de lien. La propriete 
parameter determine I'lD actuel. Avee additionalParams, la troisieme constante est assignee 
au parametre additionnel &L. AtagParams ajoute une classe CSS a la balise <a>. 

10. typolink { 

parameter . data - page: alias // TSFE:id 
additionalParams = &L={$f oreignLanguagelD} 

ATagParams = class="lang" 
} 

} 

II ne vous reste plus qu'a definir les constantes exactes pour le lien, en fonction de la langue 
choisie. Si eelle-ci est la langue par defaut, le franeais ([globalVar=GP:L=0]), aucune condition 
n'est requise et le parametre du lien est configure en fixant foreignLanguagelD a 1. Le texte 
et I'icone du drapeau sont specifies respectivement par languageVersion et par flagSmall. 

Constantes : 

foreignLanguagelD = 1 

languageVersion = English version 

flagSmall = f ileadmin/images/icons/ f laguk . gif 

Si la langue selectionnee est differente de la langue par defaut, le franeais, e'est-a-dire que 
le parametre L de I'URL courante a une valeur >0 ([globalVar=GP:L>0]), alors ajoutez une 
condition avec globalVar dans le champ constants et redefinissez les constantes. 

[globalVar = GP:L>0] 
foreignLanguagelD = 0 
languageVersion - Version francaise 
flagSmall = f ileadmin/images/icons/ flagfr . gif 

[global] 

Inserez le changement de langue dans le gabarit principal et verifiez le resultat dans le front- 
end. Vous verrez que tout fonctionne uniquement avec du code TypoScript. 



5. 1 2 Travailler avec des cadres 

Meme si travailler avec des cadres n'est plus considere comme etant la meilleure pratique, 
nous desirons, par souci d'exhaustivite, vous montrer comment construire avec TYP03 des 
sites bases sur des cadres. 
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A I'aide de cadres, vous pouvez diviser le champ visuel de votre navigateur en differents seg- 
ments que vous definissez librement. Chaque segment forme des pages distinctes d'une appli- 
cation Web et peut en appeler d'autres via des liens et I'attribut target="nom du cadre". Un 
fichier HTML comprenant le code suivant agence les pages top. htm, menu. htm, content.htm 
et bottom.htm dans un jeu de cadres. 

<!DOCTYPE HTML PUBLIC " -/ /W3C/ /DTD HTML 4.01 Frameset//EN" 

"http : / /www. w3 . org/TR/html4 / frameset .dtd"> 

<html> 

<head> 

<title>Le titre</title> 
</head> 

<frameset rows- "205 , * , 50 " f ramespacing- " 4 " f rameborder- " 1 " bordercolor- " 
#000000"> 

<frame src- " top . htm" name-"top" f rameborder- " 0 " scrolling-"no" marginwidth- " 0 " 
marginheight^ " 0 " > 

<frameset cols= " 195 , * " > 

<frame src- "menu . htm" name-"menu" f rameborder- " 0 " scrolling- "no " marginwidt 
h- " 0 " marginheight- " 0 " > 

<frame src- " content . htm" name- " content " f rameborder- " 0 " scrolling- "no " marg 
inwidth- " 0 " marginheight- " 0 " > 
</frameset> 

<frame src- "bottom. htm" name- "bottom" f rameborder- " 0 " scrolling- "no " marginwid 
th- " 0 " marginheight- " 0 " > 
</f rameset> 
</html> 

Si la page est appelee par le navigateur, elle affichera clairement les cadres. Le contenu est 
fourni par des pages particulieres. 



Figure 5.95: 
Resultat de I'exemple 
HTML dans le 
navigateur 



en-tete 


menu 


zone de contenu 


bas de page 





5.12.1 Creation de cadres 

Reference 234280 Pour creer un site avec des cadres en utilisant TYP03, vous devez definir quelques pages dans 
un gabarit TS. 

myframeset = PAGE 
top = PAGE 
menu = PAGE 
content = PAGE 
bottom = PAGE 
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Chaque page recoit une valeur differente via la propriete typeNum. 

myf rameset . typeNum = 0 
top. typeNum = 1 
menu . typeNum = 2 
content . typeNum = 3 
bottom. typeNum = 4 



Un objet de contenu de type TEXT est cree pour chaque page, excepte myframeset. 

top. 10 = TEXT 

top. 10. value = en-tete 

menu .10 = TEXT 

menu . 1 0 . value = menu 

content. 10 = TEXT 

content . 10 .value = contenu 

bottom. 10 = TEXT 

bottom. 10 .value = bas de page 



Vous pouvez deja appeler les pages individuellement dans le navigateur via I'id et le parametre 
type correspondant. Le concept de selection de gabarit avec type/typeNum a deja ete presente 
a la section 5.8. 



/index. php?id=1 



frfrpe=l| 



Si vous appelez une page sans le parametre type, ce dernier sera fixe a la valeur par defaut 
(0) et appellera done le gabarit myframeset. Nous definissons a present ce dernier comme un 
jeu de cadres. En tant qu'objet de premier niveau du type d'objet PAGE, myframeset admet 
la propriete frameSet du type d'objet FRAMESET. II cree la balise <frameset> et les cadres 
respectifs ou lesjeux de cadres, via les objets de la liste numerique. Pour plus de clarte, leurs 
attributs ont ete standardises en constantes et deplaces vers le champ Constants. 



Figure 5.96: 
Affichage de pages 
avec le parametre 
type 



Constants 

f rameSetParams = border-" 1" f rameborder- " 1 " f ramespacing^ " 0 " frameParams = scrolli 
ng-"auto" f rameborder- " 1 " border-" 1" f ramespacing- " 
0" marginheight- " 0 " marginwidth- " 0 " noresize 



Setup 

Le nombre de lignes et de colonnes du cadre ainsi que sa taille sont specifies dans les proprietes 
rows et cols ; une constante est assignee a params. 

myf rameset . frameSet . rows = 205,*, 50 
myframeset. frameSet. params = $f rameSetParams 
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Les cadres et jeux de cadres sont a present definis via la liste numerique. L'objet 10 est du type 
d'objet FRAMESET et sa propriete obj est un pointeur vers le TLO representant, la page top. 
Les attributs du cadre contenus dans la propriete params sont aussi des constantes dans notre 
cas. 

myf rameset . f rameSet { 
10 = FRAME 
10 { 

obj = top 

params = {$f rameParams} 

} 

L'objet 20 du type d'objet FRAMESET represents un jeu de cadres imbrique dans le jeu de 
cadres principal. Les objets 24 et 26 servent a creer deux cadres et a afficher les pages menu 
et content dans le jeu de cadres du milieu. 

2 0 = FRAMESET 
20. cols = 195, * 

20. params = {$f rameSetParams} 
20 { 

24 = FRAME 

24 { 

obj = menu 

params = {$f rameParams} 

} 

2 6 = FRAME 
26 { 

obj = content 

params = {$f rameParams} 

} 

} 

Pour finir, nous creons le cadre 30 qui comprend le TLO bottom. 

3 0 = FRAME 
30 { 

obj = bottom 

params = {$f rameParams} 

} 

} 

Si vous appelez a nouveau la page dans votre navigateur sans le parametre, le resultat corres- 
pondra a celui de I'exemple HTML. 

5.1 2.2 Le site exemple avec des cadres 

Pour creer le site exemple avec un jeu de cadres, nous avons choisi de diviser la page en trois 
cadres verticaux dans le gabarit TS ts wrap template (frames). Le menu de gauche, le contenu 
effectif et les colonnesde droite sont integresdans la zone de contenu mediane content. Cette 
disposition facilite les references aux cadres cibles avec les menus. Sur la gauche, ils possedent 
tous I'attribut target="content". Le resultat est affiche a la figure suivante. border a ete fixe 
a 1 afin de mettre les cadres en evidence. 



5.1 2 Travailler avec des cadres 




Pour ne pas devoir redefinir a chaque fois les memes parametres des cadres, ils ont a nouveau 
ete sauves dans des constantes et definis dans le champ Constants. 



Constants 

f rameSetParams = border="l" f rameborder= " 1 " f ramespacing= " 0 " 

f rameParams = scrolling- " auto " f rameborder- " 1 " border-" 1" f ramespacing- " 0 " marginh 
eight-" 0" marginwidth- " 0 " noresize 



Dans le champ Setup, quatre TLO du type PAGE sont crees; chacun d'eux recoit son propre 
typeNumber dans typeNum. 



Setup 

myf rameset = PAGE 
top = PAGE 
content = PAGE 
bottom = PAGE 

myf rameset . typeNum = 0 
top. typeNum = 1 
content . typeNum = 2 
bottom. typeNum = 3 



Le fichier CSS responsable de la mise en forme est assigne a la propriete stylesheet des objets 
de page censes afficher du contenu. 

top . stylesheet = f ileadmin/styles/ts-template-wrap . ess 
content . stylesheet = f ileadmin/styles/ ts-template-wrap . ess 
bottom. stylesheet = f ileadmin/styles/ts-template-wrap.css 

Lejeu de cadres est appele via le TLO myframeset par la propriete typeNum=0. II est a nouveau 
defini avec I'objet frameSet et ses proprietes. Le nombre de cadres et leur ta i Me sont definis 
dans rows ; params prend en argument les attributs des cadres sous forme de constantes du 
champ Constants. Les cadres sont eux-memes generes en tant qu'objets de la liste numerique. 
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myframeset . frameset . rows = 2 05,*, 50 
myframeset . frameset .params = { $ f rameSetParams} 
myframeset . f rameSet { 

10 = FRAME 

10 { 

obj = top 

params = {$f rameParams} 

} 

20 = FRAME 
20 { 

obj = content 

params = {$£ rameParams} 

} 

30 = FRAME 
30 { 

obj = bottom 

params = {$f rameParams} 

} 

} 

Le jeu de cadres est deja defini, et seul le contenu des pages doit encore etre ajoute. A present, 
nous assignons aux pages top, content et bottom des objets temporaires, devant encore etre 
crees . 

top. 10 < temp, top 
content. 10 < temp. content 
bottom. 10 < temp. bottom 

Pour definir le contenu, nous profitons du fait que nous pouvons reutiliser des gabarits TS 
existants. Les menus et les fonctionnalites inclus dans la liste suivante doivent, bien sur, etre 
incorpores dans I'enregistrement de gabarit avec Include basis template. Le gabarit de base 
content (default) est, quant a lui, integre de la meme maniere. 

Figure 5.98: 
TypoScript Object 
Browser 




Chaque objet temporaire est ici un COA. Ceux-ci doivent etre places au debut du champ Setup 
afin d'etre definis avant I'analyse syntaxique des objets de page. 
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LesobjetsTS desires sont copies dans les objets de la liste numerique et enveloppes par la balise 
<div>. Les menus sont ajustes dans le meme temps. Par exemple, 1 0.1 .target recoit la page 
content en argument. Si vous n'etes pas sur des proprietes a utiliser pour les objets emboites, 
le TypoScript Object Browser vous aidera. 

temp.top reprend les elements de contenu du cadre top. Le menu rootline (10), le bouton 
pour la version imprimable (40), I'image de I'en-tete (20) et la navigation principale (30) sont 
affiches. 

temp.top = COA 
temp . top { 

## Menu Rootline 

10 < temp . rootline_autoparser_tswrap 

## ajustement du menu 
10.1. target = content 

10 . stdWrap . wrap = <div id= " rootline "> | </div> 
## En-tete 

20 < temp.header_tswrap_autoparser 

20 . stdWrap .wrap = <div id= "header "> | </div> 

## Navigation principale 

3 0 < temp . navigation_autoparser_tswrap 

## ajustement du menu 
3 0.1. target = content 

3 0 . stdWrap. wrap = <div id-"navi"> | </div> 

# Version impression 
40 < temp .printversion 

40 . stdWrap .wrap = <div id= "printversion" > | </div> 

} 

Les objets des elements de contenu de la navigation secondaire (100), I'information meta 
(200), la colonne Normal (20) et la colonne Droite (30) sont copies dans I'objet temp. content 
pour le cadre content. Remarquez qu'a I'interieur du COA temp.content, I'objet 10 de la liste 
numerique a ete defini lui-meme comme un COA. 

temp.content = COA 
temp.content { 

# Gauche / navigation secondaire + meta 
10 = COA 

10 { 

100 < temp . subnavigation_autoparser_tswrap 
## Ajustement du menu 

100.1. target = content 

100. 2. target = content 

2 00 < temp.metas_autoparser_tswrap 
200.1. target = content 

} 

10 . stdWrap. wrap = <div id- " sub-navigation" > | </div> 

# Contenu gauche 

20 < styles . content . get 

20 . stdWrap .wrap = <div id= " content "> | </div> 

# Contenu droit 

30 < styles . content .getRight 

30 . stdWrap .wrap = <div id= " right " xdiv id= " rightcontent " > | </divxdiv id="rightfo 
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oter">S;nbsp; </divx/div> 
30 . stdWrap . required = 1 

} 



L'objet temporaire temp.bottom pour le cadre bottom reprend les proprietes de I'objet temp. 
copyright_tswrap_autoparser via l'objet 20, afin d'afficher le sigle copyright dans le bas de 
page de I'application. 



temp.bottom = COA 
temp.bottom { 

# Bas de page 

10 = TEXT 

10. value = <div id= " footer ">< /div> 
## Copyright 

2 0 < temp . copyright_tswrap_autoparser 
2 0. wrap = <div id= " copyright "> | </div> 



Pour finir, les cadres cibles sont definis dans le champ Constants pour que les formulaires 
et les liens des elements de contenu pointent vers le bon cadre, lis sont inseres en tant que 
constantesvia content (default) avec la valeur par defaut page, et vous pouvez les editer avec 
le Constant Editor. 



Figure 5.99: 
Les attributs des liens 
sont fixes a content 



Target for internal links [PAG E_TAR G ET] 

Should match the name of the content PAGE-object in TypoScript when used 
with frames. Most cases! Set to "page" if you have frames in the template. If 
n o t, set to "" (empt y ) 
[7 [content 
Default: page 

Pageframe object [content.pageFrameObj] 
The name of the "contentframe". Normally set to "page" if the site has a 
frameset. Otherwise it should be an empty value. This is important, as it 
de termines the targ et of internal links! 
|7|content 



Default: page 



Constants 

PAGE_TARGET = content 
content.pageFrameObj = content 



Cet exemple d'utilisation de cadres devrait etre suffisant pour s'en faire une premiere idee. 
Si vous regardez le resultat dans le frontend, vous verrez qu'il est identique a celui obtenu 
dans les exemples precedents. Quelques fonctionnalites doivent encore toutefois etre ajustees. 
Par exemple, le menu rootline n'affiche pas encore le chemin de la page courante, mais cela 
pourrait constituer I'une de vos premieres taches. 
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5. 1 3 Futur et perspectives 
5. 1 3.1 XHTML et accessibility 

Le besoin de separer le contenu de la forme n'a pas contribue uniquement a la creation de 
systemes de gestion de contenu, mais a aussi influence les technologies sous-jacentes. L'HTML 
a ete developpe a I'origine en tant que langage base sur des balises, 10 avec des elements de 
mise en page destines a structurer les documents (les decouper en differentes parties), afin 
d'ajouter d'autres medias tels que des images dans le corps de texte, et afin d'interconnecter 
les documents par des liens. 

La proliferation rapide des sites Web, surtout dans le secteur commercial, a eu une influence 
sur I'importance du graphisme comme outil de differenciation ou de personnalisation des sites. 
Pendant longtemps, les tableaux ont ete utilises comme outil principal pour mettre en forme 
des listes. De plus en plus d'astuces comme celle-ci ont servi a construire les mises en page 
avec HTML, afin de repondre aux exigences d'un media visuel. 

Beaucoup d'astuces et de solutions de rechange, ainsi que les particularites introduitesdans les 
differents navigateurs, ont mis en danger la coherence de la syntaxe HTML et, par consequent, 
I'aptitude des programmes a les interpreter logiquement, tels que les navigateurs destines aux 
moins valides. Le consortium WWW dirige par le developpeur HTML Tim Berners-Lee a tente 
quelquefois de satisfaire aux exigences du graphisme en etendant les specifications HTML et 
en les rendant plus coherentes, tout en standardisant la syntaxe et en accordant moins de 
liberte aux navigateurs pour ('interpretation. 

L'idee de base derriere HTML, et meme derriere son predecesseur SGML, etait precisement de 
separer la forme du contenu 11 . Developpees relativement tot, les feu il les de style en cascade 
(CSS) constituent une technologie qui respecte cette idee. Mais en pratique, leur acceptation 
par les editeurs de navigateurs et les developpeurs de sites Web a ete tres lente. 

devolution des idees de ces dernieres annees a ete acceleree par les faits suivants : 

■ La maintenance du contenu et les changements dans le graphisme demandent beaucoup 
de travail, car les deux sont interdependants. 

■ Puisque les documents sont inutilement longs, ils consomment de la bande passante et du 
temps de chargement. 

■ La restitution sur d'autres materiels est impossible, si ce n'est a des eouts prohibitifs. 

■ De nouvelles technologies bien plus flexibles et efficaces telles que le XML ont ete develop- 
pees. 

■ Des lois sont passees dans plusieurs pays, obligeant a separer la forme et du contenu pour 
des raisons d'accessibilite, du moins pour les sites Web des institutions publiques et des 
autorites. 

10 HTML est un derive du SGML, qui a ete developpe comme un langage purement base sur des balises. Le XML a 
les memes origines, et des efforts sont entrepris pour retablir XHTML comme un langage de balisage pur. 

11 « On associe generalement le debut du mouvement pour un langage generique a une presentation 
faite par William Tunnicliffe, president de comite Graphic Communications Association (GCA), a une reunion 
du Canadian Government Printing Office en septembre 1967 : son sujet - la separation du contenu des 
documents de leur forme » dans Charles F. Goldfarb, « The Roots of SGML, a personal recollection », 
http://www.sgmlsource.com/history/roots.htm. 
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Le XHTMLjoue un role important en tant que standard et comme successeur de I'HTML. II fait 
le lien entre I'HTML et le XML. Avee Introduction du XHTML, les elements de graphisme ont 
ete, dans une grande mesure, supprimes du langage. La mise en forme devrait etre controlee 
exclusivement par CSS, autant que cela est possible, pour separer plus strictement le contenu 
de la forme. En outre, la tolerance des fautes est aussi fortement reduite. La syntaxe etant 
plus stricte, les navigateurs utilisent moins de ressources pour la correction des erreurs et 
fonctionnent done de facon tres efficace sur beaucoup de dispositifs differents, en ce compris 
sur les telephones intelligents. 

Les avantages du respect des standards en general, et de XHTML en particulier, sont les sui- 
vants : 

■ Faibles couts : une meilleure performance due a de plus courts temps de chargement et a 
une charge plus faible sur le serveur ; simplification de la maintenance des sites Web due a 
du code plus leger et a la separation du contenu de la forme. 

■ Rentabilite de I'investissement : le respect standard assure la compatibilite des nouveaux 
dispositifs d'affichage et de I'extension a d'autres langages bases sur du XML. 

■ Plus grand champ d'application : I'accessibilite est amelioree pour differentes plates-formes, 
navigateurs et technologies d'assistance ; enfin, le dernier avantage, qui n'est pas des moin- 
dres, est I'amelioration du positionnement dans les moteurs de recherche. 

Reference 895351 Le dernier point explique pourquoi XHTML et I'accessibilite sont souvent mentionnes en- 
semble : le Web Content Accessibility Guidelines (WCAG) ou le Barrierefreie Informations- 
technologie-Verordnung (BITV) allemand recommande le respect des standards, car cela per- 
met un support plus large pour les technologies d'assistance, comme les lecteurs d'ecran, les 
navigateurs vocaux et les lecteurs de lignes en braille pour les personnes ayant des handicaps 
physiques. Ainsi, en respectant les standards (X)HTML, nous avons deja fait la moitie du chemin 
vers un site Web au contenu accessible. 

Dans la version 3.6.O., TYP03 est en conformite avec « XHTML1.0 Transitional ». Tout le code 
source du cceur a ete reamenage pour respecter ce nouveau standard. Les extensions n'ont 
pas ete impliquees dans ce processus et seront mises a jour progressivement par leurs auteurs 
respectifs. 

Voici les changements essentiels de XHTML1.0 : 

■ Syntaxe : les elements ne peuvent pas se chevaucher et doivent avoir des balises fermantes. 

■ Les noms des elements et des attributs sont ecrits en minuscules. 

■ Les valeurs des attributs sont toujours placees entre des guillemets anglais, par exemple 
border="0". Les attributs peuvent ne pas apparaitre sous une forme minimale, mais doivent 
etre transcrits en entier, par exemple checked="checked" au lieu de checked. 

■ Les elements vides doivent etre delimites, par exemple par <br /> ou <brx/br>. 

■ Le contenu des elements de script et de style suit une syntaxe precise ou, mieux, est deplace 
dans un script externe ou dans des documents de style. 
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Verifiez si vos pages Web sont conformes au XHTML avec la validation (X)HTML du consor- Reference 570674 
tium WWW (voir la reference ei-contre). Les techniques de generation de pages Web acces- 
sibles decrites dans la section suivante fonctionnent en respectant le XHTML, et devraient etre 
considerees dans ce contexte. 

Voir les definitions TypoScript les plus importantes concernant le XHTML eonfigurees via con- Reference 728651 
fig: 

doctype 

Type de donnee : chame de caracteres 

Exemple : xhtml_trans | xhtml_frames | xhtml_strict | xhtml_11 | xhtml_2 | none 

Declaration du type de document. Montre les standards que le navigateur devrait res- 
pecter. 

doctypeSwitch 

Type de donnee : booleen/chaine de caracteres 
Exemple : 1 

Utilise pour placer le prologue XML en dessous de la declaration Doctype - une solution 
de rechange pour certains navigateurs. 

xmlprologue 

Type de donnee : chaine de caracteres 
Exemple : none 

Sert a supprimer le prologue <?xml version="1.0" encoding="utf-8"?>. 

htmlTag_setParams 

Type de donnee : string 

Configure les attributs de la balise <html> ; lorsque doctype est insere, tout est deja 
correctement defini. Cette propriete peut etre utilisee pour eviter certaines incoherences. 

htmlTagJangKey 

Type de donnee : chaine de caracteres 
Exemple : en-US 

Permet de fixer la valeur du langage pour les attributs xmklang et lang de la balise 
<html>, a condition que config. doctype= xhtml ait ete specifie. 

htmlTag_dir 

Type de donnee : chame de caracteres 
Exemple : rtl | Itr 

La direction du flux de texte, par exemple pour I'arabe ou I'hebreu. 

removeDefaultJS 

Type de donnee : booleen/string 
Exemple : external | 1 

JavaScript est soit deplace ailleurs, soit entierement supprime. 

inlineStyle2TempFile 

Type de donnee : booleen 
Exemple : 1 

Les definitions de style, de type inline, sont deplacees dans des fichiers separes. 
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xhtml_cleaning 

Type de donnee : chaine de caracteres 

Exemple : all | cached | output 

Solution de rechange, par exemple pour les extensions. 

5.13.2 Accessibility 

En Allemagne, par exemple, le BITV (Barrierefreie Informationstechnik-Verordnung Ordinance 
on Barrier-Free Information Technology) a ete cree suite a la loi sur I'egalite des chances pour 
les personnes handicapees. Le BITV ne concerne a I'origine que les organismes publics. Sur le 
plan federal, cette ordonnance a ete mise en pratique a une large echelle. A la fin de 2005, 
toutes les institutions federales et de nombreuses institutions d'Etat devront avoir des sites 
Web accessibles aux personnes handicapees. 

Le but premier est de garantir a ces personnes les memes chances d'acces a I'information. 
Meme celles ayant un handicap mineur, comme les myopes ou les daltoniens, devraient en 
beneficier. Un autre effet positif est I'amelioration generale de I'ergonomie des sites Web, ce 
qui contribue au bien commun. 

Voici un resume de ces principes directeurs, en accord avec les recommandations WCA62.0 
d'accessibilite les plus recentes du Consortium W3C (qui n'ont pas encore ete publiees offi- 
ciellement). 

Pour les personnes handicapees, les sites Web accessibles doivent etre : 

■ Perceptibles (du contenu de rechange comme les attributs alt pour les images) 

■ Utilisables (avec toute une serie de dispositifs et de restrictions physiques, navigation aisee, 
aide disponible) 

■ Comprehensibles (langue, abreviations) 

■ Robustes (conformes aux standards) 

En pratique, ces principes directeurs concernent tous ceux qui contribuent a la creation d'un 
site Web base sur TYP03 : developpeurs du code source, developpeurs d'extensions, develop- 
peurs de sites Web et redacteurs. Une bonne partie du travail a deja ete realisee dans le code 
source, mais il en reste beaucoup pour les extensions. Toutefois, les developpeurs Web et les 
redacteurs sont invites a assumer leur part de responsabilite. 

L'adaptation pratique la plus importante pour les developpeurs du Web est le bannissement 
dans l'(X)HTML du controle de la mise en page. Une des consequences de cette technique est 
la gestion de la mise en page sans tableau. La disposition de base, la mise en evidence et les 
autres techniques de graphisme sont principalement implementees au niveau du CSS. L'HTML 
reprend purement et simplement la structure du document. Ceci explique pourquoi le code 
source de toutes les pages accessibles est tellement semblable. 

Par exemple : dans une page HTML conventionnelle, de nombreux developpeurs du Web mar- 
quent les en-tetes avec des elements comme font-size et font-weight. Un lecteur d'ecran 
ne sait que faire avec de tels marquages. Par contre, si les en-tetes sont marques avec des 
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elements h1-h6, les lecteurs d'ecran les reconnaissent pour ce qu'ils sont, et pourraient par 
exemple afficher d'abord les en-tetes pour une meilleure navigation dans un grand document. 

Outre les proprietes deja mentionnees ci-dessus, concernant la conformite standard et les 
declarations, il existe aussi un certain nombre d'options de controle speeifiques au niveau de 
TypoScript qui touchent a I'accessibilite. En voici quelques exemples : 

La configuration suivante desactive la fonction JavaScript dans les menus, afin de supprimer 
I'affichage d'un cadre peu esthetique autour des images lorsque vous cliquez dessus. 

noBlur = 1 

Cette fonction est inoffensive en elle-meme. Malheureusement, el le a pour effet d'empecher 
la navigation avec la touche de tabulation, et die doit done etre supprimee. 

Le lien partant des etiquettes d'un formulaire et allant vers les dements adequats du formu- 
laire doit etre structure de maniere claire. Le XHTML fournit un dement label pour ce faire. 
Avec la propriete 

accessibility = 1 

du formulaire, nous activons la fonctionnalite qui cree automatiquement des etiquettes et les 
lie aux dements de donnees correspondants. Voici un exemple du resultat : 

<label for= " email " >Your Email : </label> 
<input type="text" id="email" name="email" /> 

Les contradictions avec le langage predominant sont precisees dans le code TypoScript : 

parseFunc . short . Browser - <span xml : lang- " en" lang- " en" >Browser</span> 

II en resulte une meilleure lisibilite lorsque vous utilisez des lecteurs d'ecran. 
A I'interieur des menus, vous pouvez utiliser 

accesskey = 1 

pour creer des attributs, servant a definir les des d'acces qui permettent de naviguer avec les 
commandes du clavier. L'utilisation pratique de cet attribut HTML est controversee. En TYP03, 
les raccourcis clavier sont crees a partir de la premide lettre de I'element de menu en question. 
Cela entrame quelques problemes, etant donne que de nombreux raccourcis clavier sont deja 
reserves par le systeme d'exploitation et le navigateur. Une opinion largement repandue est 
que les nombres de 0 a 9 devraient etre utilises comme cles d'acces pour offrir des options de 
navigation centralists. Cette fonctionnalite ne peut toutefois etre mise en pratique par cette 
propriete TypoScript : e'est pourquoi vous feriez mieux de ne pas I'utiliser. 

Adaptations TYP03 

Les tableaux HTML et les formulaires complexes qui satisfont aux recommandations d'accessi- 
bilite ne peuvent pas encore etre affiches. Dans de tels cas, les developpeurs/administrateurs du 
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Web devraient stacker statiquement les elements de contenu prepares a cet effet, par exemple 
grace ail type de contenu HTML de TYP03. 

Nous pouvons supposer que la conformite standard et I'aecessibilite vont jouer un role plus 
important dans la creation future de sites Web ; les effets sur TYP03 sont etudies par le projet 
Reference 563588 TYP03 « Accessibility ». 

5.13.3 TemplaVoila 

Reference 003991 Un certain nombre de nouveaux concepts ont ete introduits dans TYP03 par TemplaVoila 12 . 

Outre la possibility de preparer des gabarits HTML a partir d'un module backend, vous pouvez 
aussi creer de nouveaux types de contenus flexibles qui ne sont pas restreints par la structure 
d'une table de base de donnees. De plus, le concept de colonne est depasse ; vous definissez 
des zones qui n'acceptent que certains types de contenu. Pour ce faire, un nouveau module de 
page est disponible dans le backend. 

Comme nous I'avons deja mentionne, le developpement de TemplaVoila n'est pas encore ter- 
ming mais cette extension n'en est pas moins un outil puissant qui a deja fait ses preuves en 
production, et dont une vue d'ensemble est presentee ici. Une presentation plus detaillee se 
trouve dans le didacticiel « Futuristic Template Building » disponible a la reference ci-contre. 

Meme si TemplaVoila semble convenir parfaitement a I'application, il est en fait constitue de 
plusieurs composants differents, dont certains sont utilisables separement. Pour illustrer les 
nouvelles possibilites, les composants sont presentes individuellement, mais TemplaVoila peut 
neanmoins etre vu comme un ensemble. 



Integration visuelle des gabarits 

Une fonction fondamentale de TemplaVoila est le traitement et Integration aises de gabarits 
HTML. Cette fonction est similaire au Template Auto-Parser, excepte que les zones du gabarit 
a utiliser ou a remplacer sont selectionnees par un simple die de souris, grace a un module 
backend. 



Figure 5. 100: 
Selection et 
configuration des 
zones du gabarit 
HTML par TemplaVoila 
avec un die de souris 
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12 Le nom est inspire du un jeu de mots « voila deja votre gabarit » pour insister sur le fait qu'un gabarit HTMLse 
cree tres rapidement dans TYP03. 
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Structures de donnees(DS, Data Structures) et objets gabarits (TO, Template Objects) 

Apres la mise en correspondance par TemplaVoila, la configuration du gabarit HTML est sauvee 
dans deux structures de donnees XML (DS et TO). El le contient, a cote de I'information sur le 
type d'objets ou de donnees que ces zones acceptent, de I'information sur les zones selection- 
nees. 

Les structures de donnees (DS, Data Structures) et les objets gabarits (TO, Template Objects) 
sont definis separement mais s'utilisent I'un I'autre. Les structures de donnees contiennent 
des definitions abstraites des zones, des champs et des types de champs, comparables a la 
definition des champs dans une base de donnees - avec seulement quelques « astuces» 
supplementaires. 

Les objets gabarits font reference a une DS et definissent I'affichage d'un element d'une DS. 
Par exemple, un TO contient de I'information sur les fichiers HTML a utiliser pour I'affichage et, 
a quel endroit integrer les valeurs des champs definis dans la structure. Plusieurs TO peuvent 
etre definis pour un DS ; cela permet d'afficher la meme information sous differentes formes. 

II y a de plus en plus d'endroits oil les DS et les TO sont disponibles. Vous pouvez utiliser les 
DS pour definir a la fois la disposition de base et les types de contenu. II est aussi possible 
d'integrer TypoScript dans des TO et de fournir des options dynamiques pour les types de 
contenu qui sont a I'origine plutot rigides. 

La DS suivante (abregee) definit un champ de selection de fichiers d'images (TCEforms) et 
inclut dans le meme temps une configuration TypoScript pour leur restitution (<TypoScript>). 

<T3DataStructure> 

<ROOT type=" array "> 

<tx_templavoila type- " array " > 
<title>ROOT</title> 
<descriptionx/description> 
<eType>input</eType> 
<tagsx/tags> 
</ tx_templavoila> 
<type>array</ type> 
<el type=" array "> 

<f ield_image type-"array"> 

<tx_templavoila type-" array" > 
<title>Ein Bild</title> 
<eType> image< / eType> 
<TypoScript> 

10 = IMAGE 

10 . file . import = uploads/tx_templavoila/ 
10 . file . import .current = 1 
10 . file . import . listNum = 0 
10.file.maxW = 150 

lO.params = align=&<niot;right&<iuot; 

</TypoScript> 
< / tx_t emp 1 avo i 1 a> 
<TCEforms type- " array " > 

<config type="array"> 
<type>group</type> 

<internal_type>f ile</internal_type> 
<allowed>gif ,png, jpg, jpeg</allowed> 
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<max_size>1000</max_size> 

<uploadf older>uploads/tx_templavoila</uploadf older> 
<show_thumbs>l</show_thumbs> 
<size>l</size> 
<maxi t ems > 1 < /maxi t ems > 
<minitems>0</minitems> 
</conf ig> 

<label>Bild</label> 

</TCEf orms> 
</f ield_image> 

</el> 

<section>0</section> 
</ROOT> 
</T3DataStructure> 

Selection et restitution de gabarit 

La configuration TypoScript la plus simple pour afficher le contenu de la colonne Normal 
ressemble a ceci : 

page = PAGE 

page . typeNum = 0 

page. 10 < styles . content . get 

II manque ici une mise en page de base. Les enregistrements de donnees de la colonne Nor- 
mal sont affiches au moyen de la configuration par defaut du gabarit standard (par exemple 
content (default)). 

TemplaVoila adopte une approche differente, en redefinissant completement la restitution 
d'une page. La configuration TypoScript correspondante se presente comme suit : 

page = PAGE 
page . typeNum = 0 
page. 10 = USER 

page . 10 . userFunc = tx_templavoila_pil->main_page 

II n'est pas necessaire d'inclure des colonnes ici, car la definition des zones de contenu (en 
colonnes ou non) est definie dans la DS. El le est selectionnee dans I'en-tete de la page pour 
une page ou pour une partie de I'arborescence des pages. Nous choisissons un TO associe a 
une DS pour determiner la mise en page. 

Le processus de restitution de TemplaVoila ressemble a ceci : 

■ Recherche d'une DS et d'un TO dans le rootline. 

■ Affichage du gabarit. 

■ Lecture de I'information sur la mise en correspondance des enregistrements de donnees 
a partir de I'enregistrement de page courant, pour les zones de la DS qui acceptent les 
elements de contenu. 

■ Restitution des elements de contenu et affichage de ceux-ci dans les zones adequates. 

■ Restitution des elements de contenu qui contiennent eux-memes des zones de contenu. 
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Definissez dans I'en-tete de page et, pour ehaque page, les DS et les TO correspondants a 
utiliser. Ainsi, vous precisez les zones de contenu et la maniere dont ees zones seront restituees. 

Assignation du contenu aux pages 

De facon surprenante, le contenu incorpore de maniere habituelle n'est pas affiehe automati- 
quement avec TemplaVoila. Dans le module de page de TemplaVoila, un tel contenu apparaTt 
comme un « enregistrement inutilise ». 

Normalement, associer du contenu a une page se fait simplement en situant les enregistre- 
ments dans la page (le champ pid de la table de donnees). Par opposition, TemplaVoila sauve 
I'information sur I'affiliation d'un element de contenu a une page dans I'enregistrement de 
la page lui-meme. Cela signifie que les elements de contenu de la page peuvent provenir de 
n'importe quelle autre page et peuvent etre reutilises a de nombreuses reprises, sans devoir 
creer une copie de ces elements, et sans devoir integrer ceux-ci dans la page avec Insert re- 
cord. Pour plus de clarte, le contenu est sauve dans les pages dans lesquelles il sera publie, 
comme c'etait le cas auparavant. 



Flexforms 

Les Flexforms vous fournissent un autre moyen pour entrer et sauver des donnees en TYP03. 
lis sont deja largement implementes et sont utilises de maniere extensive par TemplaVoila. 
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Figure 5.101: 
Element de contenu 
avec Flexform et RTE 




Si Ton excepte .'utilisation typique de TYP03 comme CMS, ce systeme peut etre considere 
comme un systeme de gestion de bases de donnees base sur une interface Web. En principe, 
tous les types d'enregistrements peuvent etre traites avec TYP03. Mais on est toujours limite 
par la structure de la table de base de donnees correspondante. La table tt_content qui sert a 
sauver plusieurs types de contenu tels que Texte, Image, Table ou Formulaire est utilisee de 
maniere flexible - les formulaires pour I'insertion des donnees de types de contenu sont de 
taille variable - mais ceci n'est qu'une astuce, puisque chaque enregistrement sauve contient 
tous les champs des autres types de contenu, meme si ceux-ci ne sont pas utilises. Si vous 
voulez sauvegarder des donnees supplementaires dans un enregistrement, vous devez etendre 
la table de base de donnees. 

Les Flexforms apportent une solution grace a laquelle vous pouvez utiliser pratiquement au- 
tant de champs que vous le desirez dans un enregistrement. En outre, chaque enregistrement 
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peut utiliser d'autres champs. Puisque TYP03 est construit sur un systeme de bases de donnees 
relationnelles (par exemple MySQL) qui ne peut traiter de telles donnees, nous avons besoin 
d'un nouvel artifice. II consiste a utiliser un champ de base de donnees suffisamment grand, 
dans lequel les donnees sont sauvees dans leur propre format. 

Par consequent, les donnees de Flexform sont sauvees dans des enregistrements normaux. 
Dans les cas extremes, la table utilisee peut ne contenir qu'un seul champ pour le contenu qui 
sert a sauver les donnees. Toutefois, les champs correspondants peuvent servir plusieurs fois 
et etre melanges a des champs conventionnels. 

Les structures de donnees (DS) deja familieres sont aussi utilisees pour les Flexforms en definis- 
sant les types de champs qu'ils utilisent. Les options disponibles dans la structure de donnees 
sont les memesque celles desTCEForms. Par exemple, le code XML suivant comprend un extrait 
de la DS pour la definition d'un champ de texte, en integrant le RTE. 

<f ield_newstext type="array"> 

<tx_templavoila type-"array"> 
<title>Newstext</title> 
<eType>text</eType> 
<proc type-" array" > 

<HSC>1</HSC> 
</proc> 
</tx_templavoila> 
<TCEforms type=" array" > 
<config type="array"> 
< type > text </ type > 
<ools>48</cols> 
< r ows > 5 < / r ows > 
</conf ig> 

<label>Texte</label> 

<def aultExtras>richtext [paste | bold | italic | underline | f ormatblock | class | left 
| center | right | orderedlist | unorderedlist | outdent | indent | link | image] :rte_transf orm[f 
lag=rte_enabled |mode=ts] </def aultExtras> 
</TCEf orms> 

</£ield_newstext> 

Les donnees du Flexform sont elles-memes sauvees sous le format XML. Comme vous le voyez, 
les composants de base du traitement XML existent deja dans TYP03. 

On peut se demander si les Flexforms suffisent a eux seuls pour traiter les donnees. La reponse 
est qu'il n'est pas facile de selectionner ou de parcourir les donnees de la base de donnees. 
La base de donnees ne peut ni traiter les donnees XML enregistrees, ni distinguer le contenu 
du code XML qui I'entoure. Des lors, les Flexforms ne sont pas reellement adequats pour les 
donnees qui doivent etre selectionnees sur base de leur contenu. 

Les Flexforms sont aussi disponibles independamment de TemplaVoila. 
Contenu flexible 

L'integration visuelle des gabarits HTML, I'utilisation de la DS, les possibilites des Flexforms 
permettent a TemplaVoila d'introduire de nouveaux types de contenus flexibles qui viennent 
s'ajouter aux types de contenu classiques tels que Text, Text w/image, etc. Ici, le developpeur 
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peut definir assez facilement un nouveau type de contenu a partir d'un gabarit HTML, dispo- 
nible immediatement pour le traitement et affiche correctement dans le frontend. De plus, il 
est possible de definir des zones qui sont reprises a plusieurs endroits. Par exemple, un element 
de contenu peut contenir jusqu'a trois liens avec des descriptions. 

Vous pouvez aussi utiliser des types de contenu flexibles sans un gabarit d'affichage, meme 
sansTemplaVoila - dansce cas, seulsles Flexforms sont utilises. Nous n'avons besoin que d'une 
structure de donnees (DS) pour ce faire, un objet gabarit (TO) n'est done pas indispensable. C'est 
une bonne idee que de creer un gabarit simple, et ce, meme si ce gabarit sera inutile par la 
suite, car TemplaVoila depend d'un gabarit HTML pour creer des structures de donnees. 



Contenu restrictif 

Bien que le nouveau type de contenu se nomme Flexible content, vous pouvez utiliser le 
meme concept pour des types de contenu tres restrictifs. Avec le nouveau module Web — > 
Page de TemplaVoila, une zone de contenu du gabarit est definie de facon a restreindre le 
nombre de types de contenu specifiques a deux. Si ces deux types de contenu sont definis 
specifiquement pour cette zone, vous avez une solution qui va reagir a I'insertion de contenu 
non conforme, et ainsi garantir une mise en page universale a travers tout le site Web. II s'agit 
d'un concept oppose a celui que TYP03 a utilise jusqu'a present, dans lequel les redacteurs 
jouissaient d'une grande liberte. Vous pouvez bien sur combiner les deux methodes de n'im- 
porte quelle maniere. 



Des zones de contenu a la place des colonnes 

Meme si le concept des colonnes semble toujours pratique et satisfaisant, avec TemplaVoila, 
vous n'etes plus oblige de vous limiter a ce genre de division. Meme sans TemplaVoila, vous 
pouvez certainement editer et inclure du contenu dans des zones precises, puisque vous pou- 
vez ajouter et utiliser autant de colonnes que vous le desirez. Cependant, cela devient plus 
difficile pour les redacteurs de garder une vue d'ensemble a partir du moment oil la mise en 
page se base de moins en moins sur les colonnes. 
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Figure 5.102: 
Edition de contenu 
avec le module de la 
page 
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5 TypoScript 



Pour cette raison, TemplaVoila contient un nouveau module de page qui, dans la derniere 
etape de son developpement, est prevu pour affieher schematiquement la mise en page, pour 
que les differentes zones puissent etre facilement editees. En outre, vous avez la possibility de 
configurer des regies pour controler I'utilisation de certains types de contenu dans certaines 
zones. 



Utilisation de TemplaVoila 

Reference 673845 Si vous regardez ces possibilites comme un tout, vous voyez que TemplaVoila convient par- 
ticulierement bien aux sites Web qui changent frequemment de mise en page, pour lesquels 
les pages sont divisees en zones et en colonnes, ou encore qui utilisent beaucoup de types 
differents de contenu. En fait, TemplaVoila a precisement ete developpe dans le contexte d'un 
projet ayant ces exigences. Le projet requerait un workflow dans lequel un graphiste Web de- 
vait produire des elements de contenu dans une interface WYSIWYG, a partir de gabarits HTML. 
Une etude de cas a ete realisee pour ce projet. El le est disponible a la reference ci-contre. 

Comme vous le voyez a la figure 5.103, nous n'avons pas utilise de colonnes dans le site Web. 
Nous avons par contre eu tres souvent recours a divers gabarits dans le site Web, ayant chacun 
des zones de contenu differentes. 



Figure 5. 103: 
TemplaVoila utilise en 
production 
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5.13 Futur et perspectives 



TemplaVoila est un outil puissant pour la mise en forme du contenu et des gabarits et, pour 
une version alpha, il a atteint un bon niveau de qualite. II sera certainement encore ameliore 
pour inelure les fonctions manquantes et en ajouter de nouvelles. A ce stade, TemplaVoila 
a deja introduit plusieurs innovations de base qui peuvent vous servir, meme sans utiliser le 
module. 
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Extensions 



6. 1 Apergu 

Une des caraeteristiques principales de TYP03 est de pouvoir etendre ses fonctionnalites grace 
au systeme des extensions. Les extensions se presentent sous forme de paquetages simples 
a installer pouvant contenir des modules, des plugins, du code TypoScript, etc. Les extensions 
sont installees sur le serveur, grace au gestionnaire d'extensions, a partir d'un repertoire 
central, le repertoire d'extensions. 

Les extensions ont ete introduites dans la version 3.5 de TYP03. Avant cette version, il etait 
deja possible de completer le systeme avec des interfaces. Les extensions dont les tables de 
base de donnees debutent avec tt_ sont issues de cette periode. Si ces extensions avaient le 
merite d'exister, leur installation etait une tache ardue, impliquant differentes configurations 
dans plusieurs systemes de fichiers separes. II y avait aussi un risque d'incompatibilite entre les 
differentes extensions. 

L'introduction du systeme d'extensions a provoque la creation d'une interface d'installation 
claire. De plus, les interfaces existantes ont ete groupees, permettant pour la premiere fois un 
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developpement decentralise deTYP03, lui donnant un second souffle. Depuis I'apparition d'une 
architecture d'extensions et du repertoire d'extensions, la quantite d'extensions a rapidement 
augmente. 

Les extensions, disponibles gratuitement, sont developpees soit par des programmeurs ama- 
teurs ambitieux, soit par des fournisseurs professionnels de services Internet. On y retrouve, 
en partie, de petites ameliorations des fonctions existantes, mais dans la plupart des cas, ces 
extensions sont des applications a part entiere, telles que des archives de publication, des ges- 
tionnaires de bibliotheques, des calendriers d'evenements, ou un systeme de reservation pour 
les hotels. 

Le systeme d'extensions n'a pas seulement le merite de faciliter le deploiement d'extensions 
a I'aide d'une interface d'administration. II offre aussi aux programmeurs une securite et une 
architecture claire, ce qui garantit la possibility de mettre a jour le code source de TYP03. 

6.2 Le systeme d'extensions 

Le systeme d'extensions consiste en plusieurs composants interdependants : 
Extension API 

Interface vers le noyau du systeme, permettant Integration d'extensions dans le systeme 
TYP03 

Gestionnaire d'extensions 

Module backend pour I'administration et I'insta Nation d'extensions 

Repertoire d'extensions 

Repertoire central en ligne permettant le telechargement d'extensions a partir de, ou 
vers le site TYP03.org 

Ces composants forment la base des extensions - maisaquoi ressemblent-ils concretement? 
6.2.1 Structure d'extensions 

Une extension consiste en plusieurs fichiers rassembles dans un repertoire. Le nom du repertoire 
represente aussi la cle d'extension pour cette extension. Les sous-repertoires sont utilises pour 
les composants (plugins, modules, etc.) de cette extension. Voici le repertoire pour I'extension 
mininews : 

mininews/ 
doc/ 

manual . sxw 

wizard_f orm. dat 

wizard_form.html 
ext_emconf . php 
ext_icon . gi f 
ext_localconf . php 
ext_tables . php 
ext_tables . sql 
ext_typoscript_setup . txt 
icon_tx_mininews_news . gif 
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locallang .php 
locallang_db . php 
pil/ 

ce_wiz . gif 

class . tx mininews pil .php 
class . tx mininews pil wizicon.php 
clear . gif 
locallang. php 
tea . php 

Seul le programmeur manipule ces fichiers individuellement, s'il desire apporter des modifica- 
tions direetement dans I'extension. Un administrateur ou programmeur de site Web n'accede 
meme pas a ces fichiers, ou n'a pas a s'en inquieter, puisque les extensions sont installees en 
paquetages, comme nous allons le voir. 

6.2.2 Cle d'extension 

Le nom du repertoire d'une extension definit sa cle d'extension, et cette cle constitue la base 
des noms des fichiers et du code PHP a I'interieur de I'extension. Ceci signifie que si vous 
renommez le repertoire (ou la cle), vous devez aussi renommer les fichiers, et modifier le code 
PHP. 

La cle d'extension doit etre unique car toutes les extensions sont installees dans un seul 
repertoire. Dans un meme temps, un espace de nommage au sein de TYP03 est defini par 
les cles uniques, permettant d'eviter les conflits. Les cles d'extension doivent etre enregistrees 
dans le repertoire d'extensions de TYP03 (TER). Nous y reviendrons plus loin. 

6.2.3 Composants d'extensions 

Pour augmenter les capacites du systeme, une extension peut contenir les composants sui- 
vants : 

■ Nouvelles tables de base de donnees* \ 

■ Extension de tables de base de donnees existantes* 

■ Tables de base de donnees avec des donnees statiques 

■ Fonctions frontend 

■ TypoScript* 

■ Elements de contenu* 

■ Menus frontend* 

■ TypoTags* 

■ Plugins frontend de toutes sortes* 

■ Fonctions backend 

■ Modules backend* 

1 Les composants marques d'une asterisque (*) peuvent etre erees a I'aide de I' Extension Kickstarter, qui simplifie 
considerablement le developpement de telles extensions. Le Kickstarter est decrit en detail a la section 7.2. 
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■ Entrees dans des menus contextuels* 

■ TSConfig page et utilisateur* 

■ Services* 

■ Bibliotheques 

■ Configuration systeme 

■ Habillage backend (couleurs et icones) 

■ Extension/modification de chaque classe PHP du systeme 

6.2.4 Categories d 'extensions 

Les extensions sont classees en categories de base, en fonction de leur place dans I'architecture 
TYP03. Ces categories sont affichees dans le gestionnaire d'extensions et correspondent fon- 
damentalement a une division technique. El les sont aussi classees dans le repertoire d'exten- 
sions en fonction de leur application. On y retrouve des categories telles que communication, 
eCommerce, habillage, administration, et autres. 

Backend 

Les extensions listees dans cette categorie completent la fonctionnalite du backend, 
mais n'apparaissent pas en tant que modules. 

Backend Modules 

Les modules backend y sont listes ; on y retrouve de nouveaux modules principaux (ex. : 
Web, Outils), des modules (ex. : Web — > Liste) ou des fonctions de sous-modules (ex. : 
Web — » Fonctions — > Importer). 

Frontend 

Les extensions de cette categorie contiennent de petites fonctionnalites ou configura- 
tions frontend (balises meta, nouvelles balises TYP03) 

Frontend Plug ins 

Cette categorie contient toutes les extensions qui completent I'affichage et les fonc- 
tionnalites du frontend comme des elements de contenu, des menus, des bordures de 
texte ou des applications frontend completes (livre d'or, actualites, etc.). 

Miscellaneous 

Vous y trouverez toutes les extensions qui n'entrent pas dans d'autres categories, telles 
que des tables de base de donnees statiques, des fonctions pour creer des fichiers PDF 
ou programmer des bibliotheques. 

Services 

Cette categorie contient des fonctions pouvant etre utilisees par d'autres extensions 
ou par le systeme. Ces fonctions representent une autre interface d'extension dont la 
complexity est moindre que celle des extensions. 

Templates 

Dans cette categorie sont regroupes les gabarits TypoScript de sites entiers sous forme 
d'extensions. lis correspondent aux gabarits des sites compris dans TYP03, se trouvant 
dans les enregistrements de gabarits sous Static templates. 
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Examples 

Categorie pour exem pies de tous types ; ee sont souvent des extensions construites dans 
des didacticiels ou illustrant I'utilisation d'une API. 

Documentation 

Cette categorie contient des extensions de documentation basees sur des documents 
OpenOffice. 

6.2.5 Installation: niveau systeme, global ou local 

Les extensions peuvent etre installees dans trois repertoires differents du systeme : 

typo3/sysext/ (type : systeme) 

On y trouve les extensions systeme telles que cms et lang. Ici, aucune extension ne peut 
etre installee avec le gestionnaire d'extensions. 

typo3/ext/ (type : global) 

On y retrouve les extensions globales. Ces dernieres sont normalement celles fournies 
par TYP03. Ces extensions contiennent surtout des modules backend et fournissent des 
fonctionnalites de base ou etendues necessaires a la plupart des applications TYP03. II 
est possible de configurer I'option allowGloballnstall a I'aide de I'lnstallation Tool afin 
de permettre Installation d'extensions dans ce repertoire. Les parametres par defaut ne 
I'autorisent pas, parce que des conflits entre les versions pourraient apparaitre dans un 
environnement ou plusieurs sites TYP03 partagent une meme installation TYP03. 

typo3conf/ext/ (type : local) 

Les extensions sont normalement toutes installees dans ce repertoire. On les appelle ex- 
tensions locales, parce qu'elles nesontvalables que pour l'instanceTYP03 locale. En fait, 
elles ont meme priorite sur les extensions globales. Cela signifie que lorsqu'une exten- 
sion est installee loealement et globalement, Installation locale est toujours comprise 
dans le systeme, meme si son numero de version est inferieur a celui de installation 
globale. 

Plusieurs instances (sites Web) TYP03 peuvent partager une meme installation TYP03 en util- 
isant des liens symboliques, par le biais desquels ils partagent aussi des extensions globales. 
Toutefois, les extensions locales ne demeurent visibles que pour une instance particuliere d'un 
site. 

6.2.6 Repertoire d'extensions 

Dans le repertoire d'extensions TYP03 (TER), les extensions sont enregistrees de facon cen- Reference 617220 
trale et peuvent etre telechargees vers votre propre installation TYP03, puis installees. Le 
repertoire se trouve sur le site de TYP03.org. Les programmeurs peuvent transferer une exten- 
sion vers le repertoire en quelques dies de souris via le gestionnaire d'extensions. L'extension 
est alors disponible soit pour certains utilisateurs, soit pour tous, en fonction de sa configura- 
tion. II est tout aussi simple de teleeharger une extension, en quelques dies seulement. 



371 



6 Extensions 



Figure 6.1: 
Apercu des categories 
d'extensions dans le 
TER sur TYP03.org 
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Lorsqu'une extension a ete telechargee et installee, la liste des extensions disponibles dans le 
repertoire d'extensions de TYP03.org est reprise dans le module Gest d'Extensions de votre 
propre installation TYP03. Lorsqu'une extension est selectionnee et installee, le repertoire en- 
voie un fiehier (d'extension .t3x), contenant le repertoire complet de I'extension, avee tous 
les fichiers necessaires, vers le gestionnaire d'extensions de I'insta Nation locale. Ce dernier 
desarehive le paquetage vers le repertoire d'extensions. L'extension est maintenant prete a 
etre installee a I'aide du gestionnaire d'extensions. Lors de Installation, certains fichiers du 
repertoire d'extensions sont detectes, lus et inseres dans le systeme. Le gestionnaire d'ex- 
tensions fournit aussi des fonctions d'installation pour creer les tables de base de donnees 
necessaires, ou offrir une selection d'options de configuration a I'utilisateur. 

La voie inverse, c'est-a-dire I'envoi d'une extension vers le repertoire, fonctionne d'une facon 
similaire et est expliquee a la section 7.3.3. 

Le processus d'installation est tres simple et pratique pour I'utilisateur : si une extension est 
installee, I'utilisateur ou I'utilisatrice trouvera de I'information dans les fichiers installes, mais 
ce n'est pas necessaire. Vous pouvez verifier qu'une extension est deja installee grace a I'icone 
verte dans le gestionnaire d'extensions en mode Loaded Extensions ou Available extensions 
to install. 

Au moment de la publication de ce manuel, il existe plus de 1000 extensions disponibles. 
Toutefois, une grande quantite des extensions enregistrees dans le repertoire ne sont pas dis- 
ponibles pour le public, probablement parce qu'elles n'ont pas ete correctement completees, 
ou parce que les programmeurs continuent d'en ameliorer le code, ou encore parce qu'au- 



372 



6.3 Gestionnaire d'extensions 



cune documentation n'existe. Nous souhaitons toutefois souligner que les projets OpenSource 
vivent grace aux contributions actives des utilisateurs, et qu'il est deplorable de penser que 
certains de ces diamants bruts pourraient, s'ils etaient publies, retrouver un nouvel eclat dans 
les mains d'autres programmeurs I II est aussi beaucoup plus simple de trouver de I'aide et du 
soutien si vous possedez deja une version beta appropriee, ou une description de projet. 2 

6.2.7 Documentation 

Dans le repertoire d'extensions, vous trouverez aussi la documentation complete de TYP03, Reference 280413 
sous forme de documents OpenOffice. Ces extensions ne contiennent que de I'information, et 
appartiennent a la categorie documentation. Les documents sont disponibles sur TYP03.org 
en tant que pages HTML dans la section « Documentation », oil vous pouvez aussi ajouter des 
commentaires. 

En dehors de ces extensions de documentation, qui contiennent generalement des references 
et des didacticiels, il peut, et devrait, y avoir de la documentation specifique pour chacune 
des extensions. Le meme systeme que pour les extensions de documentation s'applique ici, 
hormis que ces extensions contiennent aussi un plugin, un module ou d'autres donnees. La 
documentation specifique a une extension peut, si neeessaire, etre teleehargee a partir du 
repertoire en meme temps que I'extension. On la retrouve ensuite dans le fichier OpenOffice 
manual.sxw dans le sous-repertoire doc/ de I'extension. 

Les documents OpenOffice proposent certains avantages sur d'autres formats tels que HTML, 
PDFou DocBook : 

■ Un traitement de texte puissant et disponible gratuitement facilite la redaction. 

■ Les fichiers OpenOffice .SXW sont imprimes dans le format desire. 

■ II est possible de creer des fichiers PDF directement a partir d'OpenOffice. 

■ Le format de fichier OpenOffice qui est ouvert et base sur XML est simple a lire eta convertir 
(en HTML par exemple). 

■ II est possible d'afficher la documentation directement en format HTML dans TYP03.org, 
grace a Document Suite. 

6.3 Gestionnaire d'extensions 

Le gestionnaire d'extensions (EM 3 ) est un module backend prevu pour I'administration des 
extensions. Le module est situe dans le module principal Outils, ce qui implique qu'il est nor- 
malement reserve aux administrateurs. Les fonctionnalites du gestionnaire d'extensions com- 
prennent : 

■ La liste des extensions installees 

■ L'installation et la desinstallation des extensions 

2 Les descriptions de projet se trouvent dans la section Projects du site TYP03.org, au meme titre que les projets 
deja a la recherche d'aide et de sponsors. N'importe qui peut ecrire une description de projet, ce qui constitue une 
facon efficace d'aborder des idees et des concepts afin de les mettre ensuite en pratique sur TYP03.org. 

3 NdT : EM est I'abreviation d'Extension Manager 
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■ Le transfert des extensions vers votre propre installation par un fichier T3X 

■ Le transfert des extensions du repertoire en ligne (TER) vers votre propre installation (tele- 
chargement) 

■ Le transfert de vos propres extensions vers le repertoire d'extensions TYP03 

■ Le developpement de vos propres extensions (Kickstarter) 

La section suivante presente les fonctions et les ecrans correspondants du gestionnaire d'ex- 
tensions. 

6.3.1 Liste des extensions disponibles 

Ce mode affiche toutes les extensions disponibles dans I'insta Nation TYP03. Elles sont listees 
dans le tableau avec de I'information complementaire. L'ieone +/- situee au debut de chaque 
ligne indique si une extension est installee (icone verte). En cliquant sur cette icone, vous 
installerez ou desinstallerez I'extension eorrespondante. 



Figure 6.2: 
Affiehage des 
extensions 
disponibles dans le 
gestionnaire 
d'extensions 
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Chaque extension est affichee avec son nom et son icone propres. Quelques-unes ont un point 
d'interrogation pour icone, ce qui signifie que le programmeur de I'extension n'a pas encore 
cree d'icone pour celle-ci. 

Les autres details affiches sont la cle d'extension ainsi que le numero de version. Dans la 
colonne suivante, une icone document peut apparaitre. El le signifie qu'un fichier OpenOffice 
manual. sxw existe dans le sous-repertoire doc/ de cette extension. La documentation se trouve 
aussi surTYP03.org dans la liste d'extensions. 

II est possible d'installer une extension a la fois globalement et localement. Une telle instal- 
lation est marquee comme Local GL dans le gestionnaire d'extensions. De cette facon, les 
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extensions installees localement peuvent etre modifiees selon vos propres exigences, et vous 
pouvez etre assure que cette version-la sera integree dans le systeme, plutot que I'originale. 

6.3.2 Importer des extensions du repertoire 

Les extensions peuvent etre importees simplement a partir du repertoire en ligne vers votre 
installation. Pour ce faire, seleetionnez I'option Import extensions from online repository 
du menu principal du gestionnaire d'extensions. 
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Avant d'aller plus loin dans notre description du transfert d'extensions a partir du repertoire, 
nous expliquerons brievement comment un fichier de paquetage d'extension (*.t3x) peut etre 
transfere directement vers votre serveur a I'aide du bouton Upload extension file. Vous devez 
selectionner le fichier T3X ainsi que le repertoire d'installation, puis transferer le fichier vers 
le serveur en cliquant sur Upload extension file, ['installation comme telle correspond a la 
reprise des donnees en provenance du repertoire, et est decrite ci-dessous. 

Vous pouvez acceder au repertoire d'extensions en cliquant sur Connect to online repository. 

Une connexion est alors etablie vers le repertoire et vous obtenez une liste des extensions 
disponibles. De plus, vous pouvez specifier une cle dans le champ Look up, avec laquelle vous 
pouvez acceder a des versions speciales des extensions. Une version d'extension protegee de 
cette maniere n'est pas publique, et n'est accessible qu'en specifiant la cle. C'est utile si vous 
voulez communiquer une extension aux testeurs d'une equipe de developpement. 

La liste en provenance du repertoire d'extensions contient d'autres informations en plus de 
celles deja mentionnees. La premiere colonne affiche des icones de telechargement si I'ex- 
tension n'est pas encore disponible sur le serveur local, ou si une version plus recente est 
disponible. La colonne du centre vous permet de comparer le numero des versions. La colonne 
Access montre si vous etes le proprietaire {Owner) de I'extension ou un membre (Member). 
Les membres d'une extension peuvent telecharger celle-ci, meme si el le n'est pas disponible 
dans le repertoire pour tous les utilisateurs. Les differents etats (disponible localement ou non- 
disponible, proprietaire/membre) 4 sont aussi mis en evidence par une couleur differente des 
lignes du tableau. 

4 Les fonctions des membres ne sont preserves que si vous avez un compte utilisateur sur TYP03.org et que vous 
avezsaisi les donnees d'acees dans le menu Settings du gestionnaire d'extensions. 
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Dans tous les ecrans, on peut cocher I'option « Shy extensions » pour afficher les extensions 
qui composent le paquetage de base, disponibles dans la plupart des installations. Les menus 
Order by et Show permettent d'acceder a d'autres modes d'affichage. 

Si vous avez decide de telecharger une extension, celle-ci est d'abord transferee sur votre 
serveur, mais pas immediatement installee. Pour I'installer, cliquez sur I'icone + qui apparait 
dans la liste, apres que I'extension a ete telechargee. Vous avez aussi la possibility d'installer 
I'extension dans le mode Available extensions to install a I'aide de I'icone +. 



Vue detaillee et options 

Si vous souhaitez avoir plus de details sur une extension avant de la telecharger, cliquez sur 
son nom. Vous verrez alors un apercu precis donnant des informations telles que son nom, 
I'auteur, la version, mais aussi les fichiers et les tables de base de donnees qu'elle contient. 

Dans la vue detaillee, vous pouvez selectionner la version a telecharger. Si I'option allow- 
Globallnstall est activee dans le $TYP03_CONF_VARS (Outil d'installation), vous pouvez aussi 
selectionner le chemin pour Installation des extensions globales dans typo3/ext/. Si I'option 
em_alwaysGetOOManual est aussi activee, la documentation de I'extension sera automa- 
tiquement telechargee en meme temps, action qui, sinon, devrait etre realisee separement. 
L'option Include most recent translation permet d'introduire toutes les traductions dispo- 
nibles dans I'extension. Ce qui peut etre utile si le programmeur n'a pas encore integre les 
traductions souhaitees, disponibles via le TER, dans la version consideree. 

En fonction du type d'extension et des modules et plugins qu'elle contient, une ou plusieurs 
etapes seront necessaires a I'insta Nation. Quelques extensions peuvent etre installees en un 
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seul die. Pour les autres, on vous demande si vous voulez effectuer les etapes d'installation 
necessaires, telles que par exemple creer de nouvelles tables de base de donnees, ou vider le 
cache. II est parfois necessaire de mettre en place la configuration et de la modifier pendant 
I'i nsta Nation. Les parametres pouvant etre modifies sont decrits, soit sur le moment meme, soit 
dans la documentation fournie avec I'extension. 




Toutefois, apres avoir installe les modules, ces derniers ne sont pas immediatement visibles 
dans le backend. Vous devez alors recharger le backend en cliquant sur le bouton « raf raTchir » 
de votre navigateur (ou en utilisant le raccourci clavier (ctri)+(R)). 

Les extensions sont desinstallees de facon similaire, en cliquant sur I'icone verte « - ». Assurez- 
vous que les tables de base de donnees utilisees seulement par cette extension ne sont pas 
automatiquement effacees. De cette facon, vous pouvez conserver les donnees. Par contre, 
a long terme, il est probable que plusieurs tables inutilisees s'accumulent dans la base de 
donnees. Elles peuvent alors etre enlevees a I'aide de Youtil d'installation que nous avons 
presente plus tot. 



6.3.3 Le Kickstarter 

Le Kickstarter est I'outil pour le developpement d'extensions, permettant la mise en place ra- 
pide et simple du cadre dans lequel une extension sera creee. 

Le Kickstarter est enregistre dans une extension separee (repertoire d'extension Kickstarter : 
extrep_wizard ?) ; si el le n'est pas disponible dans votre installation, commencez par tele- 
charger I'extension. Des qu'elle est installee, le Kickstarter apparait dans le menu Make new 
extension du gestionnaire d'extensions. 
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Figure 6.6: 
Le Kickstarter pret a 
ereer une nouvelle 
extension 




extension key from the 
beginning here' You can register 
one here, 

update,.. | 




Le chapitre suivant explique comment utiliser le Kickstarter et les fonctions du gestionnaire 
d'extensions prevues pour les programmeurs. 
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TYP03 est un framework pour les applications Web. On peut I'etendre, I'adapter, ou meme 
le changer completement grace aux extensions. Le noyau de TYP03 est un systeme de ges- 
tion de contenu Web reposant sur une base de donnees. On le remarque par exemple au fait 
que le CMS est mis en place sous forme d'extension, ce qui signifie qu'il est une applica- 
tion de TYP03. Cette separation entre noyau et applications reduit la complexite et facilite un 
developpement continu du systeme, grace a une API d'extension bien definie et bien struc- 
tures De plus, chaque extension possede son propre espace de nommage. La combinaison 
de ces deux proprietes evite les conflits et permet d'etendre TYP03 dans presque toutes les 
directions. 

Le gestionnaire d'extensions a deja ete presente au chapitre 6. Nous avons alors explique les 
differents types d'extensions existants et la facon de les mettre en ligne. 

Dans ce chapitre, nous verrons comment programmer par vous-meme differents types d'ex- 
tensions (plugins, modules, ...). Pour y parvenir, vous avez besoin de bases solides en PHP, en 
programmation orient.ee objet, et en SQL. Meme si vos connaissances dans ces domaines ne 
sont pas tres etendues, n'ayez pas peur de lire ce chapitre : TYP03 constitue un bon moyen de 
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se familiariser avec les langages PHP et SQL. Dans ce cas, nous vous recommandons toutefois 
d'avoir de la documentation plus precise a portee de main. 

Nous tenons a souligner que ce chapitre est une introduction au developpement de TYP03, et 
qu'il ne fournit qu'un apercu. Meme si le Kickstarter prend a son compte une bonne partie du 
travail du programmeur, il sera quand meme parfois necessaire de s'attaquer a la documenta- 
tion. La plupart des sections debutent avec une reference vers d'autres sources d'information. 

7.1 Un compteur de visiteurs en 20 minutes 

Afin d'illustrer combien il est simple et rapide d'etendre TYP03, nous allons programmer un 
plugin simple. Notre but etant seulement de donner un apercu general, nous ne donnerons 
pas d'explications detaillees dans cet exemple. 

Nous allons programmer un compteur de visiteurs, I'invention qui, a I'age de pierre du Web, a 
probablement fait la joie de millions d'auteurs de pages d'accueil. Le plugin utilise une table 
de base de donnees pour enregistrer le statut du compteur. Le compteur ne devrait compter 
chaque visiteur qu'une fois ; on y parvient grace a la session utilisateur, creee et geree auto- 
matiquement parTYP03, et ce, meme si un visiteur visite plusieurs fois la meme page au cours 
d'une session. 

On insere normalement un plugin dans une page a I'aide de I'element de contenu Inserer un 
plugin, mais nous verrons qu'il existe d'autres facons d'utiliser un plugin. 

Le plugin doit etre pret en 20 minutes. Mors allons-y ! 

oo :oo Nous avons d'abord appele le backend, et nous selectionnons maintenant le Kickstarter, auquel 
on accede par le gestionnaire d'extensions via le mode Make new extension. 

II faut d'abord specifier une cle d'extension. Nous utiliserons user_visitcounter. Rafraichissons 
maintenant le formulaire en cliquant sur Update. 



Figure 7. 1: 
Information generate 
sur /'extension sous 
General Info 




Une extension peut comporter plusieurs elements : plugins, modules, table de base de donnees, 
etc. Debutons en ajoutant I'element General info, qui contient de I'information generale a 
propos de I'extension. Nous remplissons maintenant le formulaire, et nous enregistrons I'entree 
en cliquant sur Update. Le compteur a besoin d'une table de base de donnees pour pouvoir 
compter ; nous la creons avec I'option New Database Tables. 
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La table a besoin d'un nom explicite, qui sera ensuite affiche dans le baekend. Nous I'appel- 
lerons Visitor Counter. Derriere le champ d'entree, le mot [english] apparait. II nous rappelle 
que nous souhaitons aussi avoir des descriptions dans d'autres langues. Nous ajoutons done le 
francais a cette extension en cliquant sur Setup languages et nous selectionnons French. 



« It HVIAKll K Wl/HKO 




C,U-,d u ,..U.^ T.L.I™, + 

Servtc.. + 
Static Typescript cod* + 






M 











Figure 7.2: 
Edition de langues 
supplementaires dans 
le Kickstarter 



Cependant, la table n'est pas encore terminee, et doit encore etre traitee. Nous selectionnons la 
table Visitor Counter dans le menu New Database Tables, qui estdeja listeeen tantque com- 
posant de cette extension. Nous pouvons maintenant specifier pour celle-ci un nom francais. 
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De plus, nous ajoutons un autre champ a la table dans lequel le statut du compteur sera 
enregistre. 



Figure 7.3: 
Nouvelle table de 
base de donnees avee 
un nom anglais et un 
nom francais pour 
I'affiehage dans le 
baekend 
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Figure 7.4: 
Ajout d'un champ 
dans la table 



Nous devons encore specifier quelques options, comme le montre Illustration suivante, avant 
que la table ne soit terminee. 
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Figure 7.5: 
Options de la table 
autres que des 
valeurs par defaut 
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Nous inserons maintenant un plugin dans I'extension, nous speeifions les titres en anglais et 
en frangais, et nous ajustons quelques options supplementaires. 



Figure 7.6: 
Ajout du plugin et 
d'autres composants 
dans I'extension 
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Pour finir, nous ajoutons du code TypoScript statique et nous generons un apercu du resultat 
avec View Result. L' extension peut alors etre creee dans le repertoire typo3conf/ext/user_vi- 
sitcounter/ en eliquant sur WRITE. 



Figure 7.7: 
L'extension est 
terminee et peut etre 
generee 
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Author name: 
Author email: 

Write to location: 

| Local; typo3conf/axt/user_yisitcounter/ (empty) v| [ WRITE ~ | 



Le Kickstarter eree entierement le code pour un plugin et la table de base de donnees. Nous 
pouvons directement installer cette extension avec le gestionnaire d'extensions, editer une 
nouvelle table dans le backend et selectionner le plugin frontend (qui toutefois n'affichera que 
des valeurs exemples). 
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C'est tout, du moins pour le debut. En moins de quatre minutes, la base du compteur de 03:39 
visiteurs est fonctionnelle. Mais le plugin ne compte pas encore les visiteurs, bien sur. 

Nous passons maintenant a un environnement de developpement PHP et retirons le code et 
les fichiers qui ne sont pas necessaires a ce plugin. 

Nous devons effacer les donnees : 

pil /locallang.php et ext_typoscript_editorcfg.txt 

Dans le fichier extjocalconf.php, les lignes de code integrant le fichier ext_typoscript_edi- 
torcfg.txt sont effacees. Nous creons un fichier nomme ext_typoscript_setup.txt qui contien- 
dra plus tard le code TypoScript standard pour le plugin. 

Le fichier tca.php contient des definitions necessaires pour pouvoir editer la table dans le 
backend. Dans le Kickstarter, nous selectionnons le type Integer, 10=1000 pour le champ 
counter, ce qui ne convient pas exactement a nos besoins. Nous modifierons done la definition 
du champ comme suit : 

'counter' => Array ( 

'config' -> Array ( 

' type ' -> ' input ' , 
' size' -> ' 5 ' , 
'max' -> ' 10 ' , 
' eval ' -> ' int ' , 
'default' => 0 

) 

) , 

Nous editons ensuite le fichier pil/class.user_visitcounter_pi1.php, qui contient le code PHP 5 :20 
pour le plugin, et retirons le code exemple du Kickstarter. Nous pouvons maintenant commen- 
cer a configurer le compteur. 

require_once ( PATH_tslib . ' class . tslib_pibase . php ' ) ; 

class user_visitcounter_pil extends tslib_pibase { 

var $pre£ixld = 'user_visitcounter_pil ' ; // Same as class name 

var $extKey = ' user_visitcounter ' ; // The extension key. 

I * * 

* Main plugin function 

*/ 

function main ( $content , $conf ) { 

// We do this, because it's a USER_INT object! 
$ thi s - >pi_USER_INT_ob j = 1 ; 

La fonction main sera appelee par le systeme frontend afin de creer le contenu du plugin. 

Tout d'abord, nous devons initialiser la variable Stable ; die est utilisee assez frequemment, et 
rend le code reutilisable. 

Stable = ' user_visitcounter ' 

Le compteur doit creer un enregistrement pour la page consideree ; nous demandons a Typo- 
Script de trouver ND de la page via le parametre pid. Si ce parametre n'est pas defini, $pid est 
ajuste a ND de la page sdectionnee, qui est aussi disponible via $GLOBALS['TSFE']"->id . 
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// any page id configured? 

$pid = intval ( $this->cObj ->stdWrap ( $conf [ ' pid' ] , $conf [ 'pid. ' ] ) ) ; 

// if not use current page 

$pid = $pid ? $pid : $GLOBALS [ ' TSFE ' ] ->id; 

Nous connaissons maintenant I'lD de la page et recherchons un enregistrement eompteur. S'il 
n'y en a aucun, nous creons un nouveau tableau et nous initialisons le eompteur a zero. 

// search for counter record 
$res = $GLOBALS [ ' TYP03_DB ' ] ->exec_SELECTquery ( ' * ' , $table, 

'pid='.$pid, ", ", 1); 

if ($res) { 

$row = $GLOBALS [ 'TYP03_DB' ] ->sql_f etch_assoc ($res) ; 
} else { 

// initialize a new counter 
$row = array ( ) ; 
$row [' counter ' ] = 0; 

} 

Nous regardons a present si I'utilisateur est deja connu, et s'il ne Test pas, le eompteur passe a 
la valeur 1. Une verification est effectuee pour savoir si la de d'extension existe dans la session 
utilisateur. Si ee n'est pas le eas, el le est creee, et les donnees de la session sont reecrites, ee 
qui veut dire que le eompteur compte les visiteurs par session. 

// check if this user should be counted 
$knownUser = $GLOBALS [ ' TSFE ' ] ->f e_user->getKey ( ' ses ' , 

$this->extKey) ; 

if ( ! $knownUser ) { 

$GLOBALS [ 'TSFE' ] ->f e_user->setKey ( ' ses' , $this->extKey , 1) ; 
$GLOBALS [ ' TSFE ' ] ->f e_user->storeSessionData ( ) ; 

$row [' counter ' ] += 1; 



L'enregistrement du eompteur doit etre mis a jour, ou cree s'il n'existe pas encore. 

// update the counter record 
if ( $row[ 'uid' ] ) { 

$this->cObj->DBgetUpdate($table, $row['uid'], $row, 

' counter ' , true) ; 

} else { 

$this->cObj->DBgetInsert ($table, $pid, $row, 

' counter ' , true) ; 

} 

Pour afficher le eompteur, nous creons une instance de tsl i b_cO bj 1 , qui est la classe principale 
de restitution de contenu dans le frontend et sera expliquee en detail plus loin. La methode 
cObjGetSinglef) est utilisee pour afficher le contenu en reprenant les parametres du setup 
TypoScript renderObj. Le contenu cree est ensuite retourne. 

1 La section 7.5.5 explique pourquoi une instance est creee au lieu d'utiliser $this->cObj. 



384 



7.1 Un compteur de visiteurs en 20 minutes 



// render the counter with the Type-Script renderObj 
$lCObj = t31ib_div: :makelnstance ( ' tslib_cObj ' ) ; 
$lCObj ->setParent ( $ this->cObj ->data , 

$this->cObj ->currentRecord) ; 
$lCObj->start ($row, $ table); 

$content = $lCObj ->cObjGetSingle ( $conf [' renderObj '] , 

$conf [ ' renderObj . ' ] ) ; 

return $ this->pi_wrapInBaseClass ( $content ) ; 

} 

} 

Le setup TypoScript suivant est ensuite insere dans le fichier ext_typoscript_setup.txt, qui 77:04 
identifie I'lD de la page et definit la mise en forme du compteur avec renderObj : 

plugin.user_visitcounter_pil { 
pid.data = pageiuid 

renderObj = COA 
renderObj { 
10 = TEXT 

10. field = counter 
10 . noTrimWrap = | | 
20 = TEXT 

2 0. value = visitors on this page 

} 

} 

Bien sur, nous avons emprunte la voie la plus courte, et avons omis le temps de debogage. 79 :46 - Termine ! 
Mais cet exemple illustre tout de meme comment, avec le Kickstarter et un peu d'experience, 
vous pouvez obtenir rapidement des resultats. 

Ce compteur a la particularity de pouvoir etre configure par TypoScript. II s'agit d'un concept 
general dansTYP03, qui assure un degre de flexibility maximum. TypoScript permeta la foisde 
configurer le plugin et de definir sa restitution. On peut modifier ces deux aspects, sans avoir 
a effectuer de changements dans le code PHP. 

Le plugin est configure en definissant I'lD de la page sur laquelle I'enregistrement du compteur 
doit etre situe a I'aide de pid. Vous pourriez simplement entrer I'lD de la page en question dans 
le code PHP : 

$pid = $GLOBALS [ ' TSFE ' ] ->id; 

Mais nous essayons plutot d'obtenir un ID via TypoScript : 

$pid = intval ( $this->cObj ->stdWrap ( $conf [ 'pid' ] , $conf [ 'pid. ' ] ) ) ; 

Le setup TSdu pid est passe a la methodestdWrap de I'objet cObj. C'estexactement la methode 
que le stdWrap TypoScript fournit. Si vous regardez la reference TypoScript, vous verrez a quel 
point la gamme d'options de cet objet est etendue. Nous en ferons bon usage. 

Les deux lignes de code suivantes donnent le meme resultat : 
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// PHP: 

$pid = $GLOBALS [ ' TSFE ' ] ->id; 

// TypoScript: 
pid.data = page:uid 

En utilisant TypoScript pour la configuration, le plugin peut etre utilise de differentes facons. 
Vous pouvez par exemple eerire : 

pid = 12 

Le plugin ici ne comptera pas le nombre de visiteurs par page, mais le nombre de visiteurs pour 
tout le site, en n'enregistrant le statut du compteur que sur la page ayant ND=12.Vous devriez 
alors modifier aussi le texte affiche par le plugin. Les setups TS necessaires a cet ajustement 
seraient alors les suivants : 

plugin. user_visitcounter_pil { 
pid = 12 

renderObj . 20 .value = visitors on this website 

} 

II est done possible, avee I'aide de TypoScript, de modifier la fonctionnalite des plugins dans 
une certaine mesure (pour autant que vous I'utilisiez dans le code PHP). 

Vous pouvez encore faire d'autres modifications, par exemple traduire le titre du compteur en 
francais. Pour ce faire, redefinissez renderObj. 20.value, ou ajoutez le texte en francais comme 
une option. 

plugin. user_visitcounter_pil { 
pid = 12 

renderObj . 20 . value = visitors on this website 
renderObj.20.lang.fr = Visiteurs de ce site 

} 

Si le site Web est correctement configure pour la langue francaise, le texte francais est alors 
affiche automatiquement. 

conf ig . language - fr 

Bien sur, il n'est pas tres pratique de devoir activer le compteur sur chaque page avec I'element 
de contenu Inserer un plugin, meme s'il compte les visiteurs pour I'entierete du site. Ceci peut 
etre evite en inserant le plugin en un point approprie du gabarit du site. 

page. 80 =< plugin. user_visitcounter_pil 

Le plugin est maintenant active sur chaque page. 

Puisque le plugin n'effectue pas lui-meme la restitution du compteur, mais ne fait que passer 
les reglages TypoScript de renderObj a cObjGetSingle(), vous pouvez utiliser toutes les options 
offertes par TypoScript en ce qui concerne I'affichage. Le compteur de visiteurs peut done 
beneficier des fonctions graphiques. 
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Pour afficher le eompteur comme a la figure suivante, vous ne devez effectuer aucune modi- 
fication dans le code PHP, seulement quelques adaptations TypoScript. 

EEKffiCI Figure 7.8: 

mX^Bmm^B Exemple de eompteur 

plugin.user_visitcounter_pil . renderObj > 

plugin.user_visitcounter_pil . renderObj = IMAGE 
plugin.user_visitcounter_pil .renderObj { 
alttext . field = counter 
file = GIFBUILDER 
file { 

XY = [10.w]+20,27 
backColor = #000000 
10 = TEXT 
10 { 

text. field = counter 
fontSize = 21 

fontFile = f ileadmin/Facelif t . ttf 
fontcolor = #00EE00 
offset = 6,22 

} 

20 = BOX 

20 . dimensions = 0,0,200,1 

20. color = #00EE00 

21 < .20 

21 . align = , b 

22 < .20 

22 . dimensions = 0,0,1,40 

23 < .22 

23 . align = r 

} 

} 

Notez que le eompteur de visiteurs n'est utilise iei qu'a titre d'exemple. II existe eertainement 
de meilleurs compteurs que celui-ci. Creer le eompteur avee un habillage n'a servi iei qu'a 
illustrer le lien entre les langages PHP et TypoScript. Si le eompteur avait reellement ete utilise 
de cette facon, le serveur aurait genere un total de 135 487 fichiers image, qui devraient un 
jour etre supprimes. 



7.2 Assistant d'extensions : le Kickstarter 

Comme I'exemple du eompteur de visiteurs I 'a illustre, le Kickstarter cree un framework com- 
plet dans lequel il reste a ajouter les fonctionnalites. Toutes les extensions creees par le Kicks- 
tarter peuvent etre installees immediatement, et affichent deja un « Hello world ». Une ex- 
tension enregistree peut etre rechargee et editee par le Kickstarter, mais le code deja entre 
manuellementsera perdu lors de I'enregistrement, car le Kickstarter n'est pas un editeur pour 



387 



7 Developpement d'extensions 



les extensions existantes ; il sert seulement a en demarrer une nouvelle. Avant de commencer 
a creer une extension, vous devez choisir une ele d'extension. 

7.2.1 Definition d'une cle d'extension 

Chaque extension a son propre espace de nommage, defini par la ele d'extension. Cette cle 
represente une courte chaine de earacteres pouvant comporter les earacteres de a a z, de 0 a 
9, ainsi que « _». II existe deux types d'extensions, qui different par leur ele : d'un cote les 
extensions normales, pouvant aussi etre publiees dans le repertoire d'extensions TYP03 (TER), 
et de I'autre les extensions specifiques a un projet, qui ne peuvent pas etre envoyes vers le 
repertoire d'extensions. On les reconnaTt grace au prefixe user_ dans la cle d'extension. Les 
extensions normales peuvent avoir n'importe quelle cle ne commencant pas par tx ou u. 

Reference 104717 Mors que les cles specifiques a un projet utilisant le prefixe user_ peuvent porter n'importe 
quel nom, ce n'est pas le cas pour les extensions normales. Celles-ci doivent etre enregistrees 
afin d'etre uniques (cf. reference ci-contre). Apres cet enregistrement, vous disposez de dix 
jours pour changer I'extension dans le repertoire, sinon, la cle sera effacee. Si vous n'avez pas 
complete votre extension dans ce delai, vous pouvez toujours la transferer de nouveau vers le 
repertoire, pour eviter que la cle ne soit perdue. Apres enregistrement, I'extension est d'abord 
marquee comme Members only, ce qui signifie qu'apres I'avoir telechargee, I'extension n'est 
pas visible pour les autres utilisateurs, s'ils ne sont pas identifies en tant que membres. 
II est recommande de choisir un nom explicite pour I'extension, aussi court que possible : 
explicite, pour que vous (et les autres) puissiez reconnaitre de quel type d'extension il s'agit a 
partir du nom du repertoire de I'extension, et court, parce que le code du programme utilise 
cette cle comme espace de nommage. Une cle ayant un long nom impliquerait de longs noms 
de variables dans les codes PHP, HTML et CSS. Vous pouvez utiliser les traits de soulignement 
« _», mais le Kickstarter les enleve pour certains noms, ce qui peut preter a confusion. La 
solution la plus simple est done d'eviter les traits de soulignement dans le nom des cles. Une 
fois que vous avez defini une cle d'extension, saisissez-la dans le champ situe dans le coin 
inferieur droit du Kickstarter. 

7.2.2 Composants de Kickstarter 

La figure 7.9 illustre une extension comportant tous les composants pouvant etre generes par 
le Kickstarter. Vous pouvez aussi y voir quels fichiers ont ete crees lors du processus. 

Les composants peuvent etre ajoutes individuellement avec les icones +, et retires avec I'icone 
« Corbeille ». Si une extension contient plusieurs composants du meme type, les repertoires 
sont numerates en consequence : modi/, mod2/. 

Les differents composants sont les suivants : 
General info 

Toutes les extensions doivent normalement contenir le composant General info. II 
definit de I'information generale concernant I'extension, qui sera affichee dans le TER 
(repertoire d'extensions TYP03), et dans le gestionnaire d'extensions (EM). 

New Database Tables 

Sert a creer de nouvelles tables de base de donnees. A I'aide d'un assistant, vous pou- 
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vez definir des champs et des types de champs (chame de earacteres/champ de saisie, 
nombre entier/case a cocher, etc.). 

Extend existing Tables 

Ce composant permet d'etendre des tables de base de donnees deja existantes. Le meme 
assistant est disponible pour les definitions de champs. 
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figure 7.9: 
Exemple d'extension 
utilisant tous les 
eomposants pouvant 
etre erees dans le 
Kickstarter 



Frontend Plugins 

Ajoute un plugin frontend a I'extension. Les plugins peuvent etendre le frontend de 
plusieurs facons. On peut par exemple creer de nouveaux elements de contenu, des 
menus, ou des applications frontend. Le Kickstarter propose un choix parmi les plugins 
les plus cou rants. 

Backend Modules 

Cette option ajoute un module backend a I'extension. On peut I'inserer dans differents 
modules principaux tels que Web, Fichier ou Outils. 
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Integrate in existing Modules 

Certains modules peuvent etre etendus par desfonctions de sous-module. Le Kickstarter 
les supporte dans une serie de modules Web ainsi que pour le module Utilisateur — » 
Centre de taches. 

Clickmenu items 

Permet de generer des entrees dans le menu contextuel. 

Services 

Cree un composant service. 

Static TypoScript code 

Ce composant permet d'ajouter du TypoScript a I'extension. Apres avoir installe I'exten- 
sion, le code TS est actif dans tout le systeme. 

TSConfig 

Permet d'ajouter une configuration TS utilisateur et page. 
Setup languages 

Les plugins et les modules fournissent tous deux du support pour plusieurs langues. 
Dans le Kickstarter, les textes (identifiants de champs, titres, etc.) peuvent etre definis 
dans differentes langues, si elles sont ajoutees avec ce composant. 

7.2.3 Structure d'une extension 

Reference 099886 Comme decrit precedemment, les extensions consistent en une serie de fichiers et, eventuelle- 
ment, de repertoires. Ces fichiers remplissent des fonctions speeifiques determinees suivant 
leur nom, ou bien sont inclus par I'API de I'extension. 

Une extension etant normalement creee a I'aide du Kickstarter, el le contient done deja tous les 
fichiers et les repertoires dans la forme appropriee. Nous ne donnerons done ici qu'un apercu 
de leur contenu et de leurs fonctions. Les details sont expliques dans les exemples lorsque e'est 
necessaire. De plus, nous vous signalons la reference ci-contre, qui contient la documentation 
appropriee. 

ext_emconf.php 

Contient toutes les informations generales et les donnees meta concernant I'extension. 
II s'agit generalement de donnees provenant du composant General info du Kickstarter. 

extjocalconf.php 

Pour chaque requete, ce fichier est insere a la fois dans le backend et le frontend, et 
contient toutes les configurations de type ($TYP03_CONF_VARS) et de type typo3conf/ 
localconf.php. De plus, du code TypoScript peut aussi etre inclus via I'API de I'extension. 

ext_tables.php 

Contient la configuration des tables de base de donnees destinees a I'usage du backend. 
Les plugins et les modules sont inclus via I'API de I'extension. Le code correspondant est 
genere par le Kickstarter et doit rarement etre modifie. 

ext_tables.sql 

Ce fichier contient les donnees SQL pour la definition des tables. Cette definition est 
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reconnue et analysee par I'EM et I'outil d'installation. De cette facon, I'EM (gestionnaire 
d'extensions) et I'outil d'installation peuvent detecter si une table doit etre creee ou 
mise a jour. 

ext_ta b I es_sta t i c+ a d t.sq I 

Contient des definitions de tables SQL, y compris les donnees; il est prevu pour les 
donnees statiques, comme on les retrouve par exemple dans I'extension Static Info 
Tables. Cette extension contient des donnees a propos des pays, des langues et des 
devises. L'abreviation « adt » signifie « add drop table » et se refere a I'option du meme 
nom, uti Usee lorsque la table est creee avec I'outil mysqldump, de facon a ce que les 
instructions SQL correspondantes puissent etre placees au debut du code SQL. 

DROP TABLE IF EXISTS static_countries ; 

Pour etre reconnue correctement, la definition de la table doit aussi exister dans ext_ 
tables.sql. 

ext_typoscript_*.txt 

Contient du code TypoScript integre globalement, pour qu'il ne soit pas seulement dis- 
ponible via les enregistrements de gabarits (cf. static/). 

ext_conf_template.txt 

Ce fichier maintient si necessaire les definitions des options de configuration des ex- 
tensions. En fonction de ces definitions, ces options sont visibles pour I'utilisateur dans 
I'EM. 

*icon*.gif 

Contient les fichiers icones pour I'extension, les tables de base de donnees, les plugins, 
les modules, etc. 

locallang*.php 

Ces fichiers contiennent des textes ecrits dans les differentes langues utilisees par les 
plugins ou par les modules, ainsi que les definitions TCA. 

class.*.php 

Contient les classes PHP pour les plugins et les fonctions de sous-modules. 
class.ext_update.php 

Autorise les fonctions permettant de mettre a jour I'extension dans I'EM ; I'extension 
newloginbox en fournit un exemple. 

conf.php 

Ce fichier configure un module et I'insere dans le backend. 
index.php 

Le fichier index.php constitue generalement le script principal d'un module. 

pil / 

Ce repertoire contient les scripts et les donnees d'un plugin. 
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cm1/ 

Ce repertoire contient les scripts et les donnees des menus contextuels. 

modi/ 

C'est le repertoire d'un module. II contient les fichiers conf.php et index.php. 
modfund/ 

Contient les scripts et les donnees des fonctions de sous-modules. 

static/ 

Ce repertoire contient des fichiers gabarits TypoScript inseres via I'API de I'extension, et 
qui sont ensuite disponibles dans les enregistrements de gabarits, de la meme facon que 
les gabarits statiques. 

SV1/ 

Repertoire contenant des services. 

res/ 

Repertoire pour toutes sortes de donnees (« resources »). 

doc/ 

Repertoire pour la documentation ; contient aussi le fichier wizard_form.dat, dans le- 
quel se trouve I'ensemble de la definition generee par le Kickstarter. II est possible de 
creer une nouvelle extension dans le Kickstarter a partir de cette information, sur base 
d'une extension existante. 

7.2.4 Regies de base des extensions 
Composants 

Comme on I'a deja mentionne, une extension peut avoir plusieurs composants. Toutefois, 
toutes les combinaisons n'ont pas de sens : par exemple, une extension ne devrait contenir 
que les composants d'une seule application. Une extension pour effectuer une reservation est 
un bon exemple d'extension comportant plusieurs composants : des tables de base de donnees, 
un plugin pour afficher les donnees dans le frontend et permettre de faire des reservations, 
ainsi qu'un module backend pour I'affichage et I'administration des reservations. II ne serait 
pas logique de lui ajouter un plugin affichant les actualites de I'office du tourisme de votre lo- 
cality. II s'agit d'une fonctionnalite distincte, qui devrait constituer une extension separee. On 
applique la regie suivante : a moins qu'il ne soit reellement utile d'installer tous les composants 
dans une meme extension, ils devraient avoir chacun leur propre extension. 

Documentation 

Meme s'il n'est pas toujours possible de fournir une documentation complete avec une exten- 
sion, el le devrait au moins contenir un manuel (doc/manual.sxw) comportant la section « In- 
troduction ». Cette section doit contenir une description, et si possible une capture d'ecran. 
Pour un plugin, il est important de preciser s'il s'agit d'un element de contenu, par exemple, 
ou s'il doit etre integre dans une page a I'aide d'lnserer un plugin. 
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En general, il n'est pas necessaire que cette description soit partieulierement longue : el le peut 
ne fournir qu'un apercu. La section « Introduction » etant affichee dans la vue detaillee de 
I'extension dans le TER de TYP03, vous pouvez alors deja avoir une bonne idee de ce qu'est 
I'extension. Cette information vous permet de juger si I'extension convient a I'usage que vous 
souhaitez en faire. Pour quelqu'un qui recherche une extension en particulier, cela lui evite de 
perdre du temps a essayer differentes extensions. 

Notez qu'un manuel transfere vers le repertoire d'extensions pour la premiere fois, comme 
decrit a la section 7.3.5, doit d'abord etre initialise. Sinon, la section « Introduction » ne sera 
pas reconnue. 

Categories 

II est important que les extensions soient classees dans les bonnes categories. Elles doivent 
etre classees dans les categories de base (backend, modules backend, frontend, etc.) utilisees 
pour le classement dans I'EM, mais aussi dans les categories du TER liees a I'application, que 
vous pouvez assigner a I'extension sur TYP03.org (cf. section 7.3.4). 

Alors que les categories de base permettent de garder un affichage clair dans I'EM, les categories 
du TER permettent de trouver I'extension appropriee en fonction d'un usage particulier. 

Publication 

II est important de mentionner encore une fois que toutes les lignes de code utilisees dans 
le cadre de TYP03 (qui correspondent a I'extension que vous avez vous-meme ecrite) sont 
automatiquement soumises a la licence GPL. Cela ne signifie pas que vous devez publier votre 
extension, mais gardez a I'esprit que plusieurs annees de travail ont ete consacrees a ce projet, 
et que toute contribution permettant a TYP03 de progresser vous est aussi profitable. 



7.3 Gestion d'extensions pour les programmeurs 
7.3.1 Fonctions du gestionnaire d'extensions 

Le gestionnaire d'extensions propose plusieurs fonctions interessantes qui sont tres utiles a 
I'administration de vos propres extensions. On retrouve ces fonctions dans la vue detaillee 
d'une extension, obtenue en cliquant sur le nom d'une extension listee dans I'EM. Un menu 
s'affiche alors, contenant differentes fonctions. 




Fonctions dans la vue 
detaillee de I'EM 
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Information 

De I'information detaillee a propos de I'extension est reprise ici. Hormis les details 
generaux tels que le nom, la description et le numero de version de I'extension, on y 
retrouve de I'information sur les fichiers et les tables de base de donnees. On y voit aussi 
eventuellement les erreurs relatives a I'extension consideree; comme une violation de 
I'espace de nommage de I'extension, ou des definitions XCLASS manquantes (cf. section 
7.10). Les messages d'erreur sont marques en rouge. 

Edit files 

Vous permet d'editer en ligne les fichiers de I'extension ; ce qui peut parfois etre utile 
pour corriger de petites erreurs sur le serveur Web. 

Backup/Delete 

Un certain nombre de fonctions sont regroupees dans cet element, comme vous pouvez 
le constater a la figure suivante. Celles-ci sont decrites dans les paragraphes suivants. 



Figure 7.11: 
Fonctions du menu 
Backup/Delete dans 
I'EM 
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Backup — ► Extension files 

II est certainement tres utile de pouvoir telecharger I'extension en tant que fichier 
T3X. Ce paquetage contient toute I'extension, et peut etre reinstall grace a I'EM. 
De cette facon, il est possible d'envoyer les extensions simplement par email, sans 
avoir a compresser manuellement tous les fichiers necessaires dans une archive 
zip. De plus, il arrive frequemment que I'extension PHP pour la decompression de 
fichiers ne soit pas disponible, en particulier sur les serveurs Windows. Ainsi, cer- 
tains paquetages risquent de demeurer compresses. On reconnait les paquetages 
au -z apparaissant a la fin du nom du fichier *-z.t3x). 

Backup — > Data tables 

Cette fonction permet de telecharger la table de base de donnees de I'extension, 
si el le existe. 

Delete 

Cette fonction efface eompletement I'extension du serveur, a condition qu'elle ne 
soit pas active. 
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Update EM.CONF 

Vous permet de mettre a jour le fichier ext_emconf.php ou une extension. Ce 
fichier fait le eompte, en quelque sorte, des versions des fichiers de I'extension, ce 
qui aide a verifier si les fichiers ont ete modifies, rendant necessaire une mise a 
jour de la version dans le TER. Cette information est affichee en consequence dans 
I'apercu disponible sous Information. II est recommande d'utiliser cette fonction 
avant de transferer une extension vers le TER. 

Make new extension 

Cette fonction vous permet d'utiliser I'extension comme gabarit, ou de creer une 
nouvelle extension dans le Kickstarter. On peut y specifier une nouvelle cle d'ex- 
tension, puis developper la nouvelle extension. Mais cela ne signifie pas que la 
fonctionnalite de cette extension est reprise dans la nouvelle extension, car le 
Kickstarter cree un nouveau framework qui ne reprend pas le code specifiquement 
ecrit pour I'extension selectionnee. Cette fonction est utile, par exemple, si vous 
souhaitez creer une extension ayant une table de base de donnees identique ou 
similaire a eel le d'une extension preexistante. 

Dump DB 

Vous pouvez I'utiliser pour mettre a jour la definition de la base de donnees dans 
ext_tables.sql. Cette fonction est utile si, par exemple, vous avez effectue des modi- 
fications dans la definition de tables a I'aide de phpMyAdmin, et que vous desirez les 
inserer dans I'extension. N'oubliez pas que les definitions de la table du TCA ont peut- 
etre besoin d'etre adaptees. 

Upload 

Cette fonction permet de transferer I'extension vers le TER. El le est decrite plus en detail 
dans les sections qui suivent. 



7.3.2 Compte utilisateur TER 

Avant de pouvoir telecharger des extensions vers le TER (sur TYP03.org), vous devez d'abord 
creer un compte utilisateur sur TYP03.org (cf. reference ci-contre). Ensuite, saisissez votre nom 
d'utilisateur et votre mot de passe dans I'EM sous Settings. Nous vous signalons que I'EM, 
seulement avec ces donnees d'acces, peut afficher les extensions pour lesquelles vous etes 
considere comme membre (Members only). 



Reference 900162 
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Figure 7. 12: 
Saisie des donnees 
d'acees au repertoire 
TER dans I'EM 



Un mot de passe est necessaire au telechargement d'une extension. II peut varier d'une exten- 
sion a I'autre. Si vous utilisez souvent le meme mot de passe, vous pouvez entrer un mot de 
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passe standard dans le champ default upload password. Le mot de passe est defini lors de 
I'enregistrement de la ele d'extension, mais peut etre modifie par la suite. 

7.3.3 Transfert d'une extension vers le TER 

Pour transferer une extension vers le TER, vous devez aeceder a la vue detaillee en cliquant 
sur le nom de I'extension en question (dans la liste fournie par le gestionnaire d'extensions). 
Seleetionnez ensuite le menu Upload afin d'afficher le formulaire illustre a la figure suivante. 

Figure 7. 13: 
Preparation d'une 
extension afin qu'elle 
soit transferee dans 
le repertoire 
d'extensions en ligne 



I 

Normalement, il voussuffit de selectionner la procedure a utiliser avec le numero de version de 
I'extension. El le peut etre directement incrementee par le transfert. Cependant, ('incrementation 
du numero de version ne signifie pas qu'elle sera affichee dans I'EM ou le TER en tant que 
nouvelle version. Cette action peut etre utile si, par exemple, vous devez apporter de legeres 
modifications a la documentation, et qu'il ne vaudrait pas la peine que les utilisateurs la 
telechargent de nouveau. Si toutefois une erreur a ete rectifiee, vous devrez selectionner le 
chiffre au centre, afin de mettre a jour le numero de version. 

Si vous avez choisi un mot de passe de transfert special pour I'extension selectionnee, vous 
devez le saisir ici. Sinon, la valeur default upload password definie dans Settings sera auto- 
matiquement utilisee. 

Si une extension est transferee pour la premiere fois vers le TER, el le est marquee en tant 
que Members only, et n'est done accessible que pour les membres identifies. L'option Private 
propose une facon de fournir la version courante de votre extension avec un mot de passe. 
Cette option est tres utile si vous voulez faire tester une nouvelle version d'une extension deja 
disponible par certaines personnes, sans la rendre publique. 

En cliquant sur Upload extension, vous transferez I'extension. Quand la procedure est ter- 
minee, un message apparaTt. Le numero de version ayant ete ineremente dans le repertoire 
d'extension, il doit bien sur I'etre aussi dans la version locale. La mise a jour doit encore etre 
confirmee apres que le numero de version a ete modifie. Le transfert vers le TER est alors 
termine. 





r-ES 
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7.3.4 Gestion d'extensions TER 



Vous avez la possibility de gerer vos extensions dans le TER sur TYP03.org. Pour ce, vous de- Reference 156502 
vez d'abord vous identifier. Si vous selectionnez ensuite un element du menu principal, vous 
pouvez acceder a vos propres extensions via I'option additionnelle My extension keys. 

Une liste s'affiche, eomme illustre a la figure suivante.Vous pouvez classer vos extensions selon 
divers criteres, et afficher quelques donnees statistiques. Si vous cliquez sur une des entrees de 
la liste, un formulaire apparaTt, donnant quelques details a propos de I'extension, et proposant 
quelques options de configuration. 



^TYPO 3 Figure 7.14: 




Liste de vos propres 
extensions sur 
TYP03.org 



Vous pouvez, a cet endroit, modifier le nom et la description de I'extension. L'extension peut 
aussi etre classee dans de nouvelles categories, que vous pouvez visualiser dans la vue Ca- 
tegories du TER. Les versions transferees jusqu'a present y sont listees. Vous pouvez effacer 
les anciennes versions; ce qui devrait etre fait regulierement, afin de liberer de I'espace de 
memoire dans le repertoire. 
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Si I'extension contientdes fichiersde langues locallang, vousaurezaussi un apereu des traduc- 
tions vers d'autres langues. Cette etape achevee, vous pouvez ensuite configurer le repertoire 
contenant la documentation. Vous trouverez de plus amples explications a la section suivante. 



Members only 

La restriction de I'acces aux membres constitue une fonction importante : el le est tres utile 
pendant la phase de developpement, pour permettre seulement a certains testeurs d'avoir 
acces aux versions beta des extensions. Comme mentionne plus haut, toute extension est 
d'abord marquee comme Members only. Pour ajouter des membres a une extension, saisis- 
sez leurs noms, ou leurs noms d'utilisateur dans TYP03.org, dans le champ prevu a cet effet 
dans Lookup users. Si vous soumettez le formulaire, tous les utilisateurs repondant a cette 
description seront listes ; vous n'avez alors plus qu'a choisir. 

Afin de rendre une extension disponible pour le grand public, c'est-a-dire de la publier dans le 
TER, vous devez desactiver I'option Members only. Vous ne pouvez toutefois pas la reactiver : 
une fois qu'une extension est publiee, el le le demeure. II est possible de garder cachees les 
versions individuelles d'une extension deja publiee, si celles-ci sont transferees avec I'option 
Private, ce qui ne les rend accessibles qu'aux utilisateurs munis d'un mot de passe approprie. 



Figure 7. 1 6: 
Saisie des membres 
d'une extension 



Members only. 




Members: 


P (teniel (Daniel Hinderink. dartiel@typc3.com) 




P werner (Werner Attmam, wa@artpian21 .de) 




l~~ kasper (Kasper Skarhej. kasper@typo3.com) 




LookuD users: 



7.3.5 Publication de documentation 

Chaque extension devrait avoir sa propre documentation dans le format specifier. Cela ne si- 
gnifie toutefois pas qu'une extension ne peut pas etre publiee en I'absence de documentation. 
En cas de doute, I'esprit du projet consiste a publier un travail non documente mais concret, 
plutot que de perdre trap de temps a essayer d'atteindre un tres haut niveau de qualite. 

La documentation d'une extension se trouve dans le fichier manual. sxw du sous-repertoire 
doc/. Ce fichier contient le manuel en format OpenOffice, et est transfere avec I'extension vers 
le TER. Ce systeme de documentation n'est pas seulement utilise pour les extensions compor- 
tant des modules et des plugins, mais aussi pour la documentation generale. Les extensions de 
type documentation contiennent seulement les fichiers ext_emconf.php et ext_icon.gif en 
plus du fichier doc/manual.sxw. 

Si vous n'avez pas encore OpenOffice, vous devriez I'installer maintenant (telechargez-le a par- 
tir de http://www.openoffice.org). II s'agit d'un paquetage bureautique tres puissant, dispo- 
nible gratuitement pour les plate-formes Unix/Linux, OS X et Windows. L'avantage du format 
OpenOffice est qu'il est ouvert. Le format est documente et disponible en tant que XML, ce 
qui permet a d'autres logiciels de le lire et de le convertir facilement. C'est aussi la raison pour 
laquelle la documentation s'affiche automatiquement sur le site de TYP03.org apres que vous 
avez telecharge votre extension. 
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Pour documenter une extension, certaines conditions doivent etre remplies. Vous devez d'abord Reference 167050 
telecharger le gabarit du manuel a partir deTYP03.org (cf. reference ci-contre) et I'enregistrer 
dans le repertoire doc/ sous le nom manual.sxw. Le gabarit contient deja des sections explica- 
tives. 

Si necessaire, vous pouvez ajouter de nouvelles sections a la documentation. Compte tenu du Reference 600297 
fait que chaque section n'est pas indispensable a chaque extension, votre manuel ne doit pas 
obligatoirement reprendre toutes les sections du gabarit. A la fin du gabarit se trouve une sec- 
tion contenant des indications generales pour la creation de documentation avec OpenOffice, 
qui devraient etre entierement effacees. La reference ci-contre donne une courte version du 
guide « Writing documentation for TYP03 ». 

Lorsque vous avez termine votre documentation, vous la rendez disponible en transferant I'ex- 
tension vers le TER. II est recommande d'y inserer au moins la section « Introduction », qui 
donne une description generale de I'extension. Apres le premier transfert - ou si vous lui avez 
ajoute de nouvelles sections - vous devez initialiser ou mettre a jour la table des matieres 
sur TYP03.org. Pour ce faire, affichez la vue detaillee de I'extension dans le repertoire, en 
selectionnant I'option Edit TOC meta data dans la section doc/manual. sxw. Apres avoir sou- 
mis le formulaire, vous pouvez adapter la table des matieres. Les sections provenant du gabarit 
sont reconnues automatiquement. La langue dans laquelle le document a ete ecrit doit etre 
assignee en consequence. Meme si la langue standard de la documentation au sein du projet 
TYP03 est I'anglais, vous avez aussi la possibilite d'ecrire votre documentation dans d'autres 
langues. 

Pour chaque section, vous pouvez aussi definir le groupe cible pour lequel elle presentera 
un interet : redacteurs, administrateurs ou developpeurs. On y parvient en selectionnant les 
icones representant differentes couches mises en evidence. Vous avez certainement remarque 
qu'il s'agissait du logo TYP03. Ces niveaux representent les trois roles utilisateur; le premier 
niveau (le plus proche de la surface) represente le redacteur, celui du centre, I'administrateur, 
et le plus bas (le plus proche du noyau), le developpeur. 
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Edition de la structure 
du contenu d'un 
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7.4 Le framework TYP03 

TYP03, avec son architecture, represente un framework qui peut etre etendu efficacement 
par des extensions. La modularity du framework permet de maintenir les principes de I'archi- 
tecture malgre son haut degre de fonctionnalite. Cette capacite d'expansion est rapidement 
disponible a I'aide de I'Extension Kickstarter, qui a deja convaincu de nombreux developpeurs, 
comme I'atteste le nombre eleve d'extensions publiques deja creees. L'effet de synergie cause 
par I'utilisation combinee des fonctions rendues disponibles par le cceur du systeme et par 
d'autres extensions permet d'effectuer de nouveaux developpements d'un niveau sig n ificati- 
vement plus haut que ceux bases sur des solutions autonomes. 

Nous allons fournir une vue d'ensemble du framework TYP03 ci-dessous. Nous aborderons 
les concepts, les modeles de donnees, les fonctions du cceur du systeme ainsi que des notes 
generales sur la programmation. Certaines remarques, du point de vue de la programmation 
dans le frontend ou le backend, sont reprises dans les sections qui suivent. 

Donner une vue d'ensemble ne signifie pas remplacer la documentation et les references 
existantes-ce qui n'aurait de toute facon aucun sens. Vous devrez toujours garder un oeil 
sur le materiel de reference, pour examiner les details des fonctionnalites et des options. Mais 
nous pensons que cette vue d'ensemble vous fournira un bon point de depart pour comprendre 
la logique du systeme. 

7.4.1 Structure du framework 

TYP03 n'est pas monolithique : sa structure est modulaire. A tel point qu'a la fois le frontend 
et le backend peuvent etre remplaces ou supprimes. Meme si plus de 99 pour cent des instal- 
lations TYP03 sont utilisees comme CMS, le systeme est en premier lieu un systeme de gestion 
de bases de donnees, qui repose sur les technologies du Web. 

Le coeur de TYP03 se definit essentiellement par un modele de base de donnees et de fonc- 
tions d'acces correspondantes dans le fichier class.t3lib_tcemain.php (TCE). Dans ce modele, 
vous pouvez organiser n'importe quelle table de base de donnees dans un type de repertoire 
similaire dans sa structure a un systeme de fichiers. L'administration des utilisateurs et de leurs 
droits fait deja partie du systeme de base. 

Le CMS utilise ce modele de donnees pour la gestion de la structure des pages avec leur 
contenu. Cela signifie que le frontend, ainsi que les tables de base de donnees associees 
(tt_content, ...) et les types de pages (Extended, Not in the menu, ...) representent une 
application (une extension) du framework TYP03. II est possible par exemple de developper un 
logiciel intranet de comptabilite sur base du backend TYP03, sans meme installer le frontend 
du CMS. 

Un autre scenario envisageable est d'avoir un frontend specialise tres performant, qui n'est 
pas structure selon la technique TypoScript, mais qui produit tout de meme immediatement 
un resultat (HTML, XML, ...). 

Meme le backend est remplacable, comme nous I'avons prouve en pratique. Si vous n'utilisez 
pas depuis longtemps TYP03, vous ne connaissez probablement pas le Classic Backend. Ce 
backend etait une application JavaScript assez impressionnante mais, de I'aveu general, un 
peu lente et difficile a maintenir. 
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Backend 



Module Extension 



Backend 
(typo3/) 



DBAL Extension 



Services Extension 



DB-Table Extension 



TYP03 Extension API 
(t3lib_extMgm) 



TYP03 Core 



Frontend (Website) 



Plugin Extension 



CMS Extension 
(sysext/cms/, tslib/) 





Webserver 







Figure 7. 18: 
Structure du 
framework TYP03 



Comme vous le savez deja, TYP03 peut s'etendre simplement a I'aide des extensions. Le CMS 
lui-meme est une extension. Du point de vue du framework, les extensions se divisent fonda- 
mentalement en cinq categories : 

■ Basees uniquement sur le cceur de I'application 

■ Basees sur le backend standard (typo3/) 

■ Basees sur le frontend du CMS (sysext/cms/) 

■ Basees sur un autre backend 

■ Basees sur un autre frontend 

Les trois premieres categories se melangent frequemment les unes aux autres : par exemple, 
dans une extension avec une table de base de donnees (le cceur) et un plugin approprie (le 
CMS) pour I'affichage. 

Les deux dernieres categories sont bien plus ra res, puisque TYP03 est generalement utilise 
comme un CMS avec un backend et un frontend standards. 



7.4.2 Conventions d'ecriture 

Avant de considerer le framework de plus pres, nous devrions introduire brievement les conven- Reference 485098 
tions d'ecriture du code adoptees par le projet TYP03. Elles vous aideront en particulier si vous 
etes habitue a integrer du code PHP directement dans les documents HTML, car cette pratique 
n'est presque plus utilisee dansTYP03. 

Ainsi, du code sous la forme : 

<?php for ( Sa=l; $a<=$count ; $a++) { ?> 

<input type="file" name= "upload_<?php echo $a ?>" size="50" /xbr />'; 
<?php } ?> 
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n'apparaTt jamais dans TYP03. Au lieu d'integrer du code PHP dans de I'HTML, avec TYP03, 
nous faisons exactement I'inverse : 

for ($a=l; $a<=$count; $a++) { 

$code.= '<input type="file" name= "upload_ ' . $a . ' " size="50" /xbr />'; 

} 

echo $code 

Cette procedure est peut-etre nouvelle pour vous : la premiere possibility est encore beau- 
coup utilisee, surtout dans les petits projets, meme si la seconde est ecrite plus clairement et 
s'execute en outre plus rapidement. 

En general, dans le projet TYP03, I'accent est mis sur le respect des conventions suivantes par 
lecode PHPet HTML: 

■ eompatibilite avec XHTML (transition) et CSS 

■ utilisation de simples guillemets anglais pour les ehames de caracteres 

■ utilisation de htmlspecialchars(), $GL0BALS[TYP03_DB']->quoteStr() et de intvalf) pour 
empecher les attaques de type cross-site scripting 

■ documentation complete des classes et des fonctions a I'aide de commentaires Javadoc/ 
PHPDoc 

Presque tout le code TYP03 est insere dans des classes. Seules quelques fonctions et variables 
globales sont presentes dans le code. Cette pratique doit aussi etre respectee dans les exten- 
sions, car c'est le seul moyen de garantir la securite et la stabilite du systeme lorsque plu- 
sieurs dizaines d'extensions sont installees. Les classes sont instanciees sous la forme d'objets, 
a quelques exceptions pres, comme par exemple pour la classe de class.t3lib_div.php qui sert 
uniquement d'espace de nommage pour les fonctions qu'elle contient. 

De I'information plus detaillee sur les conventions d'ecriture est disponible a la reference de 
cette section. Gardez a I'esprit que la mise en forme du code dans ce livre ne respecte passtric- 
tement les conventions d'ecriture, a cause de I'espace d'impression limite. Tous les exemples 
peuvent etre telecharges et ceux-la sont mis en forme correctement. 

7.4.3 Structure des repertoires 

Ci-dessous, vous trouvez une vue d'ensemble de la structure des repertoires de TYP03, parce 
qu'en allant regarder le code source, vous trouvez rapidement des eclaircissements au sujet du 
developpement d'extensions. 

La vue d'ensemble a ete limitee aux repertoires contenant du code et a ceux qui presentent un 
certain interet. 

t31ib/ 

t31ib/gfx/ 

t31ib/stddb/ 

tslib -> typo3/sysext/cms/tslib 
typo3/ 

typo3/t31ib -> ../t31ib 
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typo3/install/ 

typo3/ext/ 

typo3/mod/ 

typo3/sysext/ 

typo3/sysext/cms/ 

typo3/sysext/cms/tslib/ 

typo3 / sysext / lang/ 

II y a trois repertoires de base : t3 lib/, tslib/ et typo3/. 
t3lib/ 

Le repertoire t3lib/ reprend les fichiers class.t3lib_*.php qui eux-memescontiennentdes classes 
PHP. Certaines d'entre dies sont des fonctionnalites du coeur du systeme, mais il y a aussi des 
classes de base pour les modules et les services. D'autres classes reprennent des fonctions uti- 
lisees a la fois par les applications frontend et backend. La section suivante, Bibliotheques, 
fournit une vue d'ensemble. 

t31ib/ 

class .gzip_encode .php 
class . t31ib_be£unc .php 
class . t31ib_div.php 
class . t31ib_extmgm.php 
class . t3 lib_extobjbase . php 
class . t3 lib_iconworks . php 
class . t31ib_scbase .php 
class . t31ib_svbase .php 

class . t31ib_xml .php 
conf ig_def ault .php 

Le fichier config_default.php comprend la configuration par defaut, que vous pouvez adapter 
dans le fichier typo3conf/localconf.php avec la variable de configuration $TYP03_C0NF_ 
VARS. 

jsfunc . evalf ield. js 
j s f unc . menu . j s 
jsfunc . updatef orm. js 
jsfunc . validatef orm. j s 

Par exemple, les fichiers JavaScript contiennent des fonctions pour verifier les entrees des 
TCEForms (formulaires dans le backend). 

thumbs . php 

thumb.php est utilise dans I'attribut src des balises <img> pour generer des vignettes. 

gfx/ 

Ce repertoire contient toutes les icones et toutes les images utilisees par TYP03. Vous pouvez 
les adapter a I'aide des habillages. 
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stddb/ 

load_ext_tables . php 
tables .php 
tables . sql 
tbl_be . php 

Un certain nombre de tables de base de donnees de base sont definies ici, mais ce n'est pas le 
cas des tables du CMS. 

tslib/ 

Ce repertoire est un lien symbolique vers I'extension CMS. II est decrit plus en detail dans la 
suite de cette section. 

tslib -> typo3 /sysext/cms/tslib 

typo3/ 

C'est dans ce repertoire que se trouve le backend, de meme que I'outil d'installation et les 
repertoires d'extensions ext/ et sysext/. 

typo3/ 

alt_clickmenu . php 
alt_db_navf rame . php 
alt_doc .php 

init.php 
md5 . j s 

stylesheet . ess 
tce_db . php 
tce_file.php 
template . php 
wizard_rte . php 
wizard_table . php 
wizard_tsconf ig.php 

Les fichiers de ce repertoire comprennent des scripts et des classes, ainsi que des fichiers Ja- 
vaScript et CSS representant les fonctions de base du backend. 

install/ 

C'est ici que Ton trouve I'outil d'installation qui est d'habitude appele via I'URL du site auquel 
on ajoute .../typo3/install/. 

mod/ 

doc/ 
file/ 
help/ 
tools/ 

em/ 
user/ 
web/ 
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Certains modules backend et leurs fichiers conf.php sont situes dans le repertoire mod/. Les 
scripts du module eux-memes se trouvent souvent dans le repertoire typo3/. Normalement, 
ils devraient se trouver sous forme d'extension dans le repertoire ext/ ; ce n'est pas le cas ici 
pour des raisons historiques. Les nouveaux modules sont dans tous les cas implements en 
tant qu'extensions. 

ext/ 

aboutmodules/ 

wi zard_sor tpages / 

Les extensions globales sont installees dans le repertoire ext/. En general, il s'agit de celles 
fournies par TYP03, et contenant en grande partie des modules backend. 

sysext/ 

Le repertoire sysext/ comprend des extensions du systeme. Celles-ci ne peuvent normalement 
pas etre desinstallees avec I'EM. Par contre, une mise a jour avec I'EM est possible si I'option 
em_system Install est activee dans $TYP03_CONF_VARS (outil reinstallation). 

cms/ 

ext_tables . php 
ext_tables . sql 
locallang_tca . php 
locallang_ttc .php 
tbl_cms . php 
tbl_tt_content . php 

L'extension CMS definit des tables supplementaires avec les fichiers ci-dessus, ainsi que de 
nouveaux champs et types de pages dans la table pages. 

tslib/ 

class . tslib_content .php 
class . tslib_f e .php 
class . tslib_f etce .php 
class . tslib_feuserauth.php 
class . tslib_gif builder .php 
class . tslib_menu.php 
class . tslib_pagegen.php 
class . tslib_pibase .php 
class . tslib_search.php 
index_ts .php 
pagegen . php 
publish. php 
showpic .php 

Le repertoire tslib/ comprend le frontend et le code de generation des pages HTML pour le site 
Web. Les classes de t3lib/ sont egalement utilisees. 

lang/ 

lang.php 

locallang_core . ar . php 
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locallang_core .bg .php 
local lang_core . br . php 
local lang_core . ch.php 
locallang_core . cz . php 
locallang_core . de .php 

L'extension lang du systeme implemente dans le fichier lang.php le multilinguisme du back- 
end. Les fichiers locallang contiennent chacun des traductions pour les modules standards et 
pour les differentes fonctions du cceur du systeme. 

7.4.4 Bibliotheques 

Reference 569519 TYP03 fournit une serie de classes PHP que vous pouvez utiliser dans vos projets. A part les 
bibliotheques du frontend situees dans tslib/, et quelques classes du backend qui se trouvent 
dans le repertoire typo3/, toutes les autres bibliotheques sont dans t3 lib/. 

Nous presentons d'abord une vue d'ensemble des classes de t3lib/ avant de nous tourner vers 
les bibliotheques du frontend et du backend dans les sections suivantes. 

Rappelez-vous que vous n'allez certainement pas utiliser toutes les classes de t3lib/ dans vos 
projets. D'une part, parce que les classes du cceur auxquelles vous ne devriez pas acceder 
directement sont situees dans ce repertoire ; d'autre part, vous y trouverez des classes qui ont 
ete deplacees, venant des modules standards. Bien que ces classes soient disponibles pour vos 
projets, elles ne font pas reellement partie de I'API et pourraient changer a I'avenir. En regie 
generale, les classes dont la documentation est fournie par l'extension ExtDevEval font partie 
de I'API officielle. 

L'APl de base : 

t3lib_extMgm 

API d'extension 

Exemple : t3lib_extMgm::extPath('myextkey') 
t3lib_DB 

Abstraction de la base de donnees disponible sous forme d'objet via $GL0BALS['TYP03_ 
DB'] 

t3lib_pageSelect 

Fonctions de page disponibles dans le frontend dans I'objet $GLOBALS['TSFE']->sys_ 
page 

Backend 

t3lib_BEfunc 

Une serie de fonctions du backend bien utiles 
Exemple : t3lib_BEfunc::deleteClause('pages') 

t3lib_iconWorks 

Genere des icones a utiliser dans les modules du backend et dans I'arborescence des 
pages 
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t3lib_clipboard 

Met en pratique le presse-papiers pour les modules du backend 



Classes de base 

TYP03 fournit les classes de base suivantes pour les modules, les fonctions des sous-modules, 
les services et la mise en place du RTE : 

t3lib_SCbase 

Classe de base pour le module backend 

t3lib_extobjbase 

Classe de base pour les fonctions des sous-modules 

t3lib_rteapi 

Classe de base pour le RTE 

t3lib_svbase 

Classe de base pour les services 

Divers 
t3lib_div 

Collection de fonctions generates pour BE et FE 
t3lib_exec 

Appelle des applications externes independamment de la plate-forme ; ces applications 
sont ensuite executees avec execfj 

t3lib_cs 

Convertit le texte dans un autre codage de caracteres 



Vue en arborescence, arborescence des pages, arborescence des repertoires 
t3lib_treeView 

t3lib_pageTree extends t3lib_treeView 
t3lib_browseTree extends t3lib_treeView 
t3lib_folderTree extends t3lib_treeView 

Ces classes generent par exemple I'arborescence des pages dans la zone de navigation 
du backend. En meme temps, elles servent aussi a representer n'importe quelle table de 
base de donnees dans une arborescence ou a collecter ses donnees, comme par exemple 
dans Outils — > Recent changes. 
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TCE et TCEForms 

t3lib_TCEmain 
t3lib_transferData 
t3lib_loadDBGroup 
t3lib_TCEforms 

t3lib_TCEforms_FE extends t3lib_TCEforms 

Le TCE (moteur du coeur de TYP03) et TCEForms, qui constituent le cceur de la manipula- 
tion de donnees dans la base de donnees (TCE) et de leur traitement dans les formulaires 
(TCEForms), sont implementes par les classes ci-dessus. 

Identification 
t3lib_userAuth 

t3lib_userAuthGroup extends t3lib_userAuth 
t3lib_beUserAuth extends t3lib_userAuthGroup 
t3lib_tsfeBeUserAuth extends t3lib_beUserAuth 

Dans les classes *Auth se trouvent les fonctions necessaires a I'identification des utili- 
sateurs dans le frontend et dans le backend (beUserAuth). 



TypoScript 
t3lib_TStemplate 

t3lib_tsparser_ext extends t3lib_TStemplate 
t3lib_tsStyleConfig extends t3lib_tsparser_ext 
t3lib_TSparser 
t3lib_matchCondition 

Les classes ci-dessus mettent en ceuvre I'analyseur syntaxique de TypoScript et les fonc- 
tions qui I'accompagnent. 

Email 

t3lib_htmlmail 

t3lib_formmail extends t3lib_htmlmail 
t3lib_dmailer extends t3lib_htmlmail 
t3lib_readmail 

Ces classes contiennent des fonctions pour envoyer, lire et traiter les emails (texte et 
HTML). Le module Direct Mail se base sur ces classes. 

HTML 

t3lib_parsehtml 

t3lib_parsehtml_proc extends t3lib_parsehtml 

Ces classes servent a traiter le code HTML et sont aussi utilisees en rapport avec le RTE. 
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Autres 
t3lib_xml 

Genere du XML a partir d'enregistrements 
t3lib_diff 

Affiche les differences entre deux textes 
t3lib_syntaxhl 

Genere la mise en evidence du code source, par exemple Flexform XML ou d'autres 
formats en fonction des besoins 

t3lib_div 

Nous allons presenter la classe t3lib_div separement, etant donne qu'elle est constitute d'une 
serie de fonctions tres souvent utilisees par les extensions. Pour cette raison, nous vous recom- 
mandons d'etudier la documentation API de la classe. Les groupes de fonctions suivants sont 
presents dans la classe t3lib_div : 

■ Traitement des donnees GET et POST 

■ Fonctions de chames de caracteres 

■ Fonctions de tableaux 

■ Traitement HTML et XML 

■ Fonctions de fichiers 

■ Fonctions de debogage 

■ Informations sur le systeme 

■ Fonctions TYP03 particulieres 

7.4.5 L'APl d'extension 

Toutes les interfaces importantes pour etendre TYP03 sont rassemblees dans IAPI d'extension. Reference 915540 
LAPI est disponible dans le frontend et dans le backend apres I'i n itia lisation du systeme, via la 
classe t3lib_extMgm. 

LAPI d'extension fournit des fonctions pour les taches suivantes : 

■ La determination des chemins absolus et relatifs menant aux extensions 

■ L'extension du TCA (Table Configuration Array) 

■ L'enregistrement des modules 

■ L'enregistrement de TSConfig 

■ L'enregistrement et I'administration des services 

■ L'enregistrement des plugins 

■ L'enregistrement de TypoScript 
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Arrives a ce point de I'expose, nous n'allons pas presenter I'API dans ses moindres details, 
puisque les appels a I'API lors de Integration d'une extension sont generes automatiquement 
par I'extension Kiekstarter. Vous pouvez obtenir la documentation de IAPI en utilisant par 
exemple le module Outils — » ExtDevEval. 

En guise d'exemple, nous introduisons brievement les fonctions suivantes, car elles reviennent 
frequemment dans les plugins et les modules. Toutes ces fonctions ont le parametre $key 
en commun contenant la cle d'extension qui est passee en argument pour seleetionner des 
donnees. En outre, notez que la classe t3lib_extMgm n'est pas instanciee, de sorte que ses 
fonctions peuvent etre appelees directement. 
Exemple : 

$extPath = t31ib_extMgm: :extPath( ' macleextension ' ) ; 

function isLoaded($key, $exitOnError=0) 

Verifie si une extension est installee ; les fonctions qui la suivent produisent une erreur 
si I'extension specifiee n'est pas installee. Cette fonction genere aussi une erreur si vous 
donnez la valeur true au parametre $exitOnError. 

function extPath($key, $script=' ') 

Cette fonction renvoie le chemin absolu de I'extension. Si necessaire, vous pouvez spe- 
cifier un nom de fichier en argument qui sera joint au chemin dans $script. 

function extRelPath($key) 

Determine le chemin relatif de I'extension par rapport au repertoire du backend (TYP03_ 
mainDir, typo3/) et le renvoie. 

function siteRelPath($key) 

Fournit le chemin relatif du repertoire du site Web par rapport a I'extension. 

Souvenez-vous que la determination des chemins des extensions requiert plus de temps que 
I'acces aux variables. Pour cette raison, nous vous recommandons de sauver les chemins dans 
des variables et d'utiliser ces variables, lorsque le chemin correspondant est souvent utilise. 

7.4.6 Structure de base de donnees 

Reference 641730 Le schema de la base de donnees de TYP03 est relativement simple. En tant que profession- 
nel des bases de donnees et gourou SQL, vous aurez probablement quelques suggestions pour 
ameliorer ce schema. II y a deux raisons qui expliquent la structure de la base de donnees de 
TYP03 : d'une part, el le est basee sur une approche pragmatique, comme le reste de TYP03; 
d'autre part, cette base de donnees a ete developpee lorsque MySQL ne pouvait pas encore 
manipuler les subselects ou les unions, par exemple. Cela signifie que TYP03 utilise un con- 
cept dans lequel la logique est implementee le moins possible dans la base de donnees, et Test 
plutotdans PHP. 

Meme si TYP03 supporte les relations MM (many-to-many), des champs de texte sont utilises 
de temps a autre avec des listes d'lD separes par des virgules. Les developpeurs peuvent cri- 
tiquer cette pratique, mais I'util isation des relations MM n'apporte pas dans ce cas de gros 
avantages du point de vue de la logique de programmation. Vous pouvez evidemment vous 
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Figure 7. 19: 

Les tables les plus importantes de TYP03 et de /'extension CMS ainsi que les relations principales 
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servir de toutes les relations necessaires a vos applications. Mais, pour qu'elles soient sup- 
portees lors du traitement des enregistrements dans le backend, vous devrez certainement 
fournir du travail supplemental. 



Arborescence des pages et elements de contenu 

L'element central dans la structure de base de donnees est la page, a laquelle est assigne 
un ID unique, de sorte qu'elle puisse etre referencee et liee par d'autres pages. Les pages 
recoivent automatiquement un ID lors de leur creation. Cet ID est enregistre dans le champ 
uid [unique id) des pages de la table de base de donnees. La page est affichee dans le frontend 
par I'URLavec I'lD ad hoc, par exemple http://www.votre-domaine.com/index.ph p?id= 18. Ce 
code a pour effet d'appeler la page « B2C Accueil » dans I'application courante. Ce principe 
permet d'appeler de maniere univoque n'importe quelle page via le frontend. LID assigne par 
le systeme a une page apparait si vous placez la souris sur I'icone de la page situee a cote du 
titre de page [1]. 

Dans TYP03, tous les elements de contenu et les enregistrements sont sauves dans une arbo- 
rescence des pages comparable a I'arborescence des repertoires dans un systeme de fichiers. 
Cette arborescence est constitute de pages ; I'assignation d'une page a une page d'un niveau 
superieur se realise en utilisant le champ pid (parent id) dans lequel I'uid de la page parent 
sera enregistre. 



Figure 7.20: 
Arborescence des 
pages [I] affichee 
avec phpMyAdmin et 
champs seleetionnes 
de la table pages [2] 
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L'arborescence represente la structure du site. Celle-ci est le concept central autour duquel 
s'organisent toutes les donnees. Les menus et les sous-menus d'un site Web sont generes 
automatiquement a partir de cette structure. 

Dans I'exemple d'arborescence des pages, « B2C Accueil » est la page de demarrage du site 
Web dans le niveau racine ; el le n'a pas de page parent. Son pid est done fixe a la valeur 0. 
Toutes ses sous-pages du premier niveau contiennent une reference a « B2C Accueil » via 
la valeur 18 de leur pid. De meme, la page « Nouveautes-Details » du second niveau est 
assignee, via le pid 43, a la page « Actualites » dont I'uid est 43. L'ordre de I'affichage dans 
l'arborescence des pages et dans les menus est determine par le champ sorting. 
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Ceci s'applique egalement aux elements de contenu de la page qui, tant qu'ils ne sont pas 
des extensions, sont sauvegardes dans la table de base de donnees tt_content. Lorsqu'ils sont 
crees, ils recoivent eux aussi un uid unique ; dans le meme temps, ils sont relies— selon I'endroit 
oil ils ont ete crees-a la page correspondante, via leur pid. L'ordre de I'affichage est egalement 
organise via le champ sorting. Pour assigner I'enregistrement a I'un des types de contenu 
disponibles (par exemple texte, image, formulaire, tableau, ...), utilisez le champ CType. 

A la figure suivante, vous voyez comment les elements de contenu de la table tt_content sont 
assignes aux pages a I'aide du champ pid [1]. Dans notre cas, il s'agit de la page « Accueil » 
avec un uid de 163. Dans I'affichage liste du backend, vous voyez les changements dans le 
champ sorting lorsque vous deplacez les elements de contenu ([2] et [3]). 





uid pid 


sorting 


CType header 


□ ✓X 


174 




2SG 


mailform Contort 


U ✓X ift 




bU lextpic Hroduits 


□ ^X176 









9 






3 


□ 




e la page (3) «3 










9jEn-tctei 


fLeeafisati&rtJ Localise a; 














1 74 1 63 


'.< 




Wn Produrts 


Defaut Q^B>01! 




175 163 

176 163 


512 
76S 




§ Actualrtes 


Defaut • s ~i !j K 


iJffl 



Lontenu de la page (3) < |T| 

?>En-LgLg, n oraltsatlonl Localise a: fuldl foldl porting 

Oroduits i Mfnt Q.^B>0%% iliiS §3X 175 163 

Contact Defaut CJ^ R>013S§ ?J si, d8 SElJt 174 163 

I Actualites Defaut Q.^ B>Q%^^1 23ffi 176 163 fcesj 



Figure 7.21: 
Liens entre les 
champs uid, pid et 
sorting dans la table 
de base de donnees 
tt_content dans 
phpMyAdmin [1] et 
dans I'affichage liste 
du backend [2]/[3] 



Le redaeteur n'entre pas en contact avec cet aspect technique lorsqu'il edite les en-tetes de 
page ou les elements de contenu. II ou el le determine les elements de contenu assignes a 
chaque page avec interface utilisateur, assigne un type au contenu et definit l'ordre d'affi- 
chage en determinant ou en modifiant l'ordre des elements de contenu. 



Tables et champs 

Nous expliquons ici brievement la structure de base de la table de base de donnees de TYP03, 
meme si le Kickstarter fournit deja les champs standards necessaires lors de la creation d'une 
table. Ceci est particulierement interessant lorsque vous integrez des applications existantes 
dansTYP03. 

Pour pouvoir editer des tables dans le backend, vous devez vous referer a quelques conven- 
tions definies par le TCA (voir la prochaine section). Chaque table doit contenir les deux champs 
obligatoires, uid et pid. Le champ uid (unique ID) est un champ qui s'incremente automati- 
quement, et dont la valeur est unique pour les enregistrements de cette table. Le champ pid 
(page ID) contient ND de la page a laquelle I'enregistrement appartient, c'est-a-dire I'uid dans 
la table pages. 

De plus, il y a plusieurs champs standards qui ne sont pas obligatoires et dont la denomination 
peut varier. Par souci de clarte, il est toutefois conseille de conserver les noms standards. Voici 
quelques champs standards typiques : 
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Tableau 7.1: 
Champs standards 
dans les tables 



Champ 



Signification 



title est affiche comme titre dans le baekend 

nav_title titre alternatif a utiliser dans les menus 

crdate date a laquelle I'enregistrement a ete cree (timestamp Unix) 

cruser_id ID de I'utilisateur qui a cree I'enregistrement 

tstamp date de la derniere modification (timestamp Unix) 

sorting pour determiner I'ordre manuellement 

deleted marque un enregistrement comme efface 

hidden specifie qu'un enregistrement est cache (dans le frontend) 

starttime date a partir de laquelle I'enregistrement devient actif dans le FE (time- 
stamp Unix) 

endtime date a partir de laquelle I'enregistrement devient inactif dans le FE 
(timestamp Unix) 



Reference 392081 



Figure 7.22: 
Traitement des 
donnees dans 
phpMyAdmin et 
TYP03 (TCEForms) 



7.4.7 Base de donnees, TCA et TCEForms 

Comme dans tout systeme de gestion de base de donnees impliquant plus que les possibi- 
lity d'outils simples, l'information meta est necessaire pour decrire la structure de la base de 
donnees et de ses champs. Sans cette information, les formulaires de saisie pour les enregis- 
trementsdans le baekend n'auraient pas pu etre developpes. 

phpMyAdmin permet aussi, exactement comme TYP03, d'editer des ensembles de donnees 
dans une table de base de donnees a I'aide d'une interface Web. Mors, quelle est la difference 
entre les deux ? En fait, phpMyAdmin genere des formulaires de saisie pour les enregistrements 
a partir de la definition de la base de donnees elle-meme. Par consequent, phpMyAdmin est 
conscient du fait qu'un champ donne ne peut accepter que des valeurs entieres, puisque ce 
champ est defini comme tel dans la base de donnees. En revanche, il ne sait pas si une donnee 
n'accepte des valeurs que dans une certaine fourchette, et il n'est done pas en mesure d'affi- 
cher un champ de selection avec des valeurs predefinies. Des parametres supplementaires sont 
necessaires pour executer ce genre de tache, qui n'est pas sous-entendue dans la definition de 
la base de donnees. TYP03 se sert de ce type d'information pour traiter correctement les tables 
de base de donnees, les enregistrements et les champs, ainsi que pour rendre disponibles des 
fonctionnalites que phpMyAdmin ne peut fournir. 



hidden 



tinyinl(4) unsigned 



3 FT 
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A I'aide de cette information meta (TCA) et des TCEForms, I'edition des formulaires est rendue 
disponible dans le backend. La donnee saisie est verifiee par le TYP03 Core Engine (TCE, c'est- 
a-dire I'endroit oil les definitions TCA sont utilisees) et ecrite dans la base de donnees. 

['information meta necessaire a TYP03 est disponible dans le TCA [Table Configuration Array) 
dans la variable globale $TCA. La donnee TCA est definie dans les fichiers suivants, qui peuvent 
servir de source d'information pour la programmation des extensions : 

t31ib/stddb/tables.php 
t31ib/stddb/tbl_be.php 
typo3/sysext/cms/ext_tables .php 
typo3/sysext/cms/tbl_cms .php 
typo3 / sysext /cms / tbl_tt_content . php 
. . . / extension/ ext_tables .php 



La definition aetuelle du tableau TCA peut etre representee par un arbre dans lequel vous 
aceedez a des valeurs, ce qui est par exemple tres utile lorsque vous voulez localiser une erreur. 

Ci-apres, nous presentons une vue d'ensemble des options du TCA. Une liste exhaustive des op- 
tions sortirait du cadre de ce livre. Une telle liste se trouve a la reference mentionnee ci-contre. 
Dans la plupart des cas, les options de definition de champs du Kickstarter sont suffisantes, de 
sorte que vous n'aurez que rarement besoin de consulter cette reference. 




Voici un extrait du tableau TCA qui definit la table tt_content. Comme nous le savons, cette 
table sert a sauvegarder des elements de contenu (du texte, des images, . . .). 
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La definition TCA demarre par le tableau Ctrl qui eontient quelques details de donnees meta 
pour I'util isation des tables. De plus, on definit le champ repris dans I'affichage liste en mode 
restreint. 

$TCA[ ' tt_content ' ] = Array ( 
'Ctrl' -> Array ( 

'label' -> 'header', 

'label_alt' => ' subheader , body text ' , 

Les trois lignes suivantes determinent le champ qui servira au tri (sortby), celui qui contiendra 
la date de derniere modification (tstamp) et la maniere de nommer la table dans le backend 
(title). A cette fin, on cree une reference vers le fichier externe (locallang) qui eontient les 
valeurs des titres des champs dans differentes langues. 

'sortby' -> 'sorting', 
'tstamp' => 'tstamp', 

'title' => ' LLL : EXT : cms/ local lang_tca .php : tt_content ' , 

'delete' => 'deleted', 
'type' => 'CType', 

'prependAtCopy' => ' LLL : EXT : lang/locallang_general . php : LGL . prependAtCopy ' , 
' copyAf terDuplFields ' => ' colPos , sys_language_uid ' , 
'useColumnsForDefaultValues ' => ' colPos , sys_language_uid' , 

Le tableau suivant, enablecolumns, definit les champs qui determinent si un enregistrement 
sera visible ou non dans le frontend. La fonction enableFields() genere du code SQL sur cette 
base, code qui filtre les enregistrements invisibles. 

'enablecolumns' => Array { 
'disabled' => 'hidden', 
'starttime' => 'starttime', 
'endtime' -> 'endtime', 
'fe_group' => 'fe_group', 

) , 

'mainpalette ' -> '1', 
'thumbnail' -> 'image', 

) 

'interface' -> Array ( 

'always_description' => 0, 

' showRecordFieldList ' => ' CType, header , header_link, bodytext , image, . . . 

) , 

Dans le tableau columns sont definis les champs des tables de base de donnees. lis com- 
prennent essentiellement de I'information sur le type de champ de formulaire utilise pour 
editer les champs de la table (champ de selection, case a cocher, . . .) ainsi que leur type (texte, 
entier, ...). En outre, vous pouvez definir des fourchettes de valeurs ou fixer des valeurs stan- 
dards. 

Les TCEForms se servent de cette information pour generer les champs de formulaire corres- 
pondants. Le TCA forme avec ceux-ci la base de la manipulation des enregistrements (trier, 
cacher, ...) d'une part, et la base de leur edition avec TCEForms d'autre part. 
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' columns ' => Array ( 



Le champ CType est iei defini comme un champ de selection. II speeifie le type de contenu 
(texte, image, ...). 

'CType' => Array ( 

'label' => ' LLL : EXT: lang/locallang_general .php: LGL . type ' , 
'config' => Array ( 
'type' => 'select', 
'items' => Array ( 

Array ( ' LLL : EXT : cms /local lang_ttc .php : CType . I . 0 ' , 'header' ) , 

Array ( ' LLL : EXT : cms/ locallang_ttc .php : CType .1.1', ' text ' ) , 

Array ( ' LLL : EXT : cms/ local lang_ttc . php : CType .1.2', ' textpic ' ) , 

Array ( ' LLL : EXT : cms/ local lang_ttc . php : CType .1.3', ' image ' ) , 

Array ( 'LLL : EXT : cms/ locallang_ttc .php : CType . 1.4', 'bullets ' ) , 



) , 



'default' 




Figure 7.24: 
TCEForms affiche un 
champ de selection 
pour le champ CType 



Le champ hidden est defini comme une case a cocher; il sert a desactiver I'enregistrement 
dans le frontend (cacher). 

'hidden' -> Array { 
'exclude' -> 1, 

'label' => ' LLL : EXT : lang/locallang_general . php : LGL . hidden ' , 
'config' -> Array ( 
'type' => 'check' 

) 



bodytext est la zone de saisie qui recupere le texte des elements de contenu Text etText with 
image par exemple. 

' bodytext ' => Array ( 

'label' -> ' LLL : EXT: lang/locallang_general .php: LGL. text ' , 

'config' -> Array ( 

'type' => 'text', 

'cols' => '48', 

' rows ' => ' 5 ' , 

) 

) 
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La definition d'image est un peu plus complexe. II s'agit d'un champ de selection de type group 
qui contient certains details supplementaires. Par exemple, le nombre maximal d'entrees est 
limite a 200 par maxitems. 

'image' -> Array ( 

'label' -> ' LLL : EXT : lang/ locallang_general . php : LGL . images ' , 
'config' -> Array ( 

' type ' => ' group' , 

' internal_type ' => 'file', 

'allowed' => $GLOBALS [ ' TYP03_CONF_VARS ' ] [ ' GFX ' ] [ ' imagef ile_ext ' ] , 

'max_size' -> '1000', 

' uploadf older ' -> 'uploads/pics', 

' show_thumbs ' -> ' 1 ' , 

' size ' -> ' 3 ' , 

'maxitems' -> '200', 

'minitems' -> '0', 

'autoSizeMax' => 40, 

) 

) , 



Figure 7.25: 
Champ de selection 
du type group pour le 
champ image 



Dans le tableau types sont definis les differents types de contenu (texte, image, ...). Par 
exemple, les champs sont affiches en fonction du type d'enregistrement. C'est la valeur du 
champ CType qui determine le type d'un enregistrement donne, car celui-ci a ete entre dans 
le tableau ctrl comme tel, via la cle type. Si cette valeur est text, c'est-a-dire que I'enregistre- 
ment doit etre de type text, le champ CType est affiche avec la palette 4, le champ header 
avec la palette 3, le champ bodytext avec la palette 9, etc. 



'types' -> Array ( 

'1' -> Array (' showitem' -> 'CType'), 
'header' => Array (' showitem' => 

'CType; ; 4 ; button; 1-1-1 , header; 
'text' => Array (' showitem' => 

'CType; ;4;button;l-l-l, header; ;3; ;2-2-2 



2-2-2, subheader; 



bodytext ; 



Les palettes sont definies dans le tableau palettes. La definition ci-dessus, header;;3;; specifie 
que la palette 3 doit etre utilisee pour le champ header. Cette palette affiche les champs 
concernant I'en-tete et le champ date, comme vous le voyez ci-dessous. 



'palettes' => Array ( 
'1' => Array (' showitem' 
'2' => Array (' showitem' 



'hidden, starttime, endtime, fe_group'). 
'imagecols, image_noRows , imageborder ' ) , 
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'3' => Array (' showi tern' => 

'header_position, header_layout , header_link, date'), 

) 

) ; 



Les champs eux-memes sont deja definis dans le tableau columns du dessus et sont presentes 
comme une palette en une seule ligne, au lieu de plusieurs lignes. 




Figure 7.26: 
Palette 3 sous le 
ehamp header 



7.4.8 Flexforms 

Les champs de base de donnees sont dans tous les cas utilises d'une seule maniere dans la Reference 353987 

definition du TCA. Cela signifie qu'un champ dans lequel on saisit un nombre ne peut etre 

utilise pour enregistrer une date, bien que ce soit dans les deux cas une valeur entiere qui 

est sauvegardee. De plus, une table de base de donnees est une structure figee. Les Flexforms 

offrent une methode d'enregistrement des donnees plus flexible, comme I'autorise le format 

XML. 

Les Flexforms permettent d'effectuer plusieurs types de taches. Nous les connaissons deja via 
TemplaVoila. Vous trouverez de I'aide en consultant la reference ci-contre. 

Puisque aucune option de requete n'existe actuellement pour les donnees Flexform, leur utilite 
se limite aux taches dans lesquelles les requetes SQL ne sont pas requises pour rechercher des 
donnees enregistrees dans les Flexforms : par exemple, les options pour configurer les plugins 
via I'element de contenu Insert Plugin. 

Une maniere de rendre des options disponibles pour les plugins est d'ajouter un ou plu- 
sieurs champs a la table tt_content afin de sauvegarder la configuration. La definition TCA 
correspondante affiche des lors les options a I'aide de I'element de contenu Insert Plugin. 
Le desavantage de cette methode est que chaque plugin ajoute ses propres champs dans 
tt_content, ce qui ralentit inutilement les requetes de la base de donnees. 

Une possibility plus elegante consiste a utiliser les Flexforms qui n'ont besoin que d'un seul 
champ. En fait, tt_content contient deja le champ pi_flexform qui, comme son nom I'indique, 
est justement prevu pour cette methode. 2 

Ci-dessous, nous vous indiquons comment utiliser les Flexforms avec le champ pi_flexform en 
prenant comme exemple I'extension Newloginbox. 

2 Robert Lemke, eodeveloppeur de TemplaVoila et des Flexforms, insiste sur le fait que I'utilisation des Flex- 
forms pour configurer les plugins est reeommandee : « Anyone who still inserts their own configuration fields into 
tt_content will be tarred and feathered. » Les auteurs approuvent cette recommandation d'un point de vue tech- 
nique, mais emettent des doutes sur le type de punition preconisee. Au lieu de cela, nous menaeons de recourir a 
la moquerie ou a toute autre methode pouvant aboutir a un dommage social lors du prochain Snowboard Tour de 
TYP03. 
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Figure 7.27: 
Sauvegarde des 
parametres de 
configuration de 
newloginbox avec des 
Flexforms 



lyplugin: 



Formulaire d'identification avarice V 



DEF: 



n 




| Logout | 



Inserer votre norm d'utilisateur et mot de passe 



Afin de configurer un plugin comme newloginbox via des Flexforms, les conditions suivantes 
doivent etre satisfaites : 

■ La definition TCA du champ tt_content.pi_flexform est de type flex 

■ Activation du champ pi_flexform pour le plugin dans leTCA 

■ Creation d'une definition de structure de donnees 

■ Activation de la structure de donnees pour le plugin 

■ Lecture de la configuration a partir des donnees Flexform dans le plugin 

Le champ pi_flexform est deja predefini comme un champ de type flex. La definition dans le 
TCA se presente comme suit : 

'pi_f lexf orm' => array ( 

'label' => ' LLL : EXT : cms/locallang_ttc .php :pi_f lexf orm' , 
'config' -> Array ( 

'type' -> 'flex', 

' ds_pointerField' => 'list_type', 
'ds' => array { 



'default' => ' 

<T3DataStructure> 
<ROOT> 

< type>array< / type> 
<el> 

<xmlTitle> 
<TCEf orms> 

<label>The Title : </label> 
<conf ig> 

<type>input</ type> 
<size>48</size> 
</conf ig> 
</TCEf orms> 
</xmlTitle> 
</el> 
</ROOT> 
</T3DataStructure> 
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Comme vous le voyez, le tableau config eontient lesclesds [Data Structure) et ds_pointerField. 
A son tour, ds eontient un tableau dont les elements contiennent eux-memes les structures 
de donnees Flexform. Ces structures de donnees sont definies en XML et comprennent de 
I'information sur les champs desires et leurs types de donnees. 

Dans le fichier ext_tables.php de I'extension newloginbox, nous ajoutons le champ pi_flex- 
form au plugin pour I'affichage : 

$TCA[ ' tt_content ' ] ['types'] ['list'] [ ' subtypes_addlist ' ] [ $_EXTKEY . ' _pil ' ] 
= 'pi_flexform' ; 

Avec cette configuration, il n'y a toujours aucun element Flexform visible dans I'element de 
contenu Insert Plugin. De fait, aucune structure de donnees n'a encore ete enregistree avec 
la cle newloginbox_pi1 dans le tableau ds. Le champ list_type (dans le BE sous la forme 
d'un champ de selection avec les plugins disponibles) dans la table tt_content de cet exemple 
eontient la valeur newloginbox_pi1, car ce plugin a ete choisi dans I'element de contenu 
Insert Plugin. 

Le parametre ds_pointerField specifie que la valeur du champ list_type est utilisee en tant 
que cle du tableau ds. Par consequent, list_type determine la structure du fichier. 

Expliquer les details de la structure de donnees newloginbox serait trop complexe dans ce 
cadre, et nous vous renvoyons done a la reference. La structure de donnees est configuree 
de la meme maniere que la structure de I'exemple precedent, via la cle default. La partie 
interessante est celle comprise entre les balises <TCEForms>. Ces definitions sont les memes 
que dans le tableau TCA-sauf qu'elles se presentent sous la forme d'une structure XML. 

La structure pour le plugin se trouve dans I'extension, dans le fichier flexform_ds.xml. El le est 
enregistree via I'API d'extension dans la definition TCA du fichier ext_tables.php. 

t31ib_extMgm: : addPiFlexFormValue ( $_EXTKEY . '_pil' , 
' FILE : EXT : newloginbox/ flexform_ds . xml ' ) ; 

L'element Flexform est a present affiche dans le formulaire plugin. La donnee saisie dans ce 
formulaire est transferee via le TCE vers du XML et est sauvee dans le champ pi_flexform. La 
classe de base pour les plugins, tslib_pibase, eontient des methodes servant a la manipulation 
des donnees dans le plugin. 

Le champ Flexform pi_flexform doit d'abord etre initialise, ce que vous devriez faire au debut 
du code du plugin : 

// Init FlexForm configuration for plugin: 
$this->pi_initPIf lexForm ( ) ; 

Vous accedez au champ pi_flexform a I'interieur du plugin, avec $this->cObj->data['pi_flex- 
form']. Puisque ce champ eontient un tableau dans un format precis apres initialisation, vous 
y accedez via la methode pi_getFFvalue() qui renvoie les donnees des pseudo-champs qu'il 
eontient. 

$this->pi_getFFvalue ( $this->cObj ->data [ 'pi_f lexf orm' ] , 
' show_f orgot_password' , ' sDEF ' ) 
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Le pi ug in newloginbox contient plusieurs options elassees selon les onglets de I'index (Gene- 
ral, Welcome, . . .). Les donnees sont organisees en ce qu'on appelle des « feuilles ». La ligne 
de code ci-dessus fournit la valeur du pseudo-champ show_forgot_password a partir de la 
feuille sDEF. 

II y a beaucoup d'endroits oil les Flexforms peuvent s'averer utiles. Vous pouvez bien entendu 
les utiliser dans vos tables de bases de donnees afin, par exemple, de sauver les changements 
dans les produits d'une boutique en ligne. En outre, les Flexforms possedent un framework 
permettant d'editer les donnees XML, ce qui est certainement d'un grand interet dans de nom- 
breuses applications. 

7.4.9 TYP03 Core Engine (TCE) 

Reference 119361 Le TYP03 Core Engine (TCE) est situe dans la classe t3lib_TCEmain. II est responsable de la 
manipulation des donnees enregistrees dans les tables de bases de donnees definies par le 
TCA. Le TCE garantit la coherence lors du traitement des enregistrements ; il est utilise par les 
modules backend. De plus, il est possible d'acceder au TCE via les scripts typo3/tce_db.php et 
typo3/tce_file.php en specifiant des commandes dans ces scripts. Nous montrerons cela plus 
tard a I'aide d'un exemple. 

Le TCE utilise les donnees meta de la definition du TCA pour verifier si les donnees saisies 
sont valides. Les permissions d'acces sont aussi prises en compte et les identifications sont 
historisees. Le TCE est concu pour fonctionner de pair avec les TCEForms. Cela signifie que 
le TCE connaTt les formats de donnees des TCEForms et en tient compte. Si, par exemple, le 
champ est defini comme une relation MM dans le TCA, vous devez d'abord rechercher les 
enregistrements de la relation avant que le formulaire d'edition ne soit affiche, de sorte que 
les enregistrements puissent etre selectionnes par ce formulaire. C'est exactement de la meme 
maniere que le TCE doit configurer les enregistrements selectionnes comme des relations MM 
dans la base de donnees. 

Si le TCE est utilise directement via la classe t3lib_TCEmain, il apparaitra comme suit : 

require_once (PATH_t31ib. ' class . t3 lib_tcemain .php ' ) ; 
$tce = t31ib_div: :makelnstance ( ' t31ib_TCEmain' ) ; 
$tce->start ($data, $cmd) ; 
$tce->process_datamap ( ) ; 
$tce->process_cmdmap ( ) ; 

Le TCE est controle par deux tableaux, dont I'un peut contenir des donnees, datamap, et I'autre 
des commandes, cmdmap. Ces deux tableaux sont inclus dans le TCE par la commande $tce 
->start($data,$cmd). Les tableaux correspondants sont traites avec process_datamap() et 
process_cmdmap(). 

Commandes (cmdmap) 

Les commandes suivantes peuvent etre appliquees aux enregistrements (ou aux pages) via le 
cmdmap : 

delete 

Supprime un enregistrement. 
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copy 

Copie un enregistrement. 

move 

Deplace un enregistrement. 
Le tableau emdmap a le format suivant : $cmd[nom de la table][uid][commande] = valeur 
nom de la table 

Norn de la table de la base de donnees a traiter ; el le doit etre definie dans le TCA 

uid 

uid de I'enregistrement 
commande 

Les commandes a executer : delete, copy ou move 

valeur 

Pour la commande delete, value recoit la valeur TRUE. Pour les commandes copy et 
move, value devrait recevoir un page id. Cette valeur peut etre negative, ce qui signifie 
alors qu'un enregistrement est insere apres la page ayant ce page id (en valeur absolue), 
au lieu d'etre insere dans la page si la valeur avait ete positive. 

Les commandes sont done creees comme suit : 
$cmd [nom de la table][uid] ['delete'] = TRUE 
$cmd [nom de la table][uid]['copy'] = +/-p/d 
$cmd [nom de la table][uid]['move'] = +j-pid 

L'exemple suivant supprime I'enregistrement avec l'uid=54 de la table tt_content : 

$cmd = array ( ) ; 

$cmd[ ' tt_content ' ] [54] [ 'delete' ] = 1; 
$tce->start (array ( ) , $cmd) ; 
$tce->process_cmdmap ( ) ; 

Cette commande deplace la page avec l'uid=1 203 en premiere position a I'interieur de la page 
qui a l'uid=303. 

$cmd = array ( ) ; 

$cmd[ 'pages' ] [1203] [ 'move] ' = 303; 
$tce->start (array ( ) , $cmd) ; 
$tce->process_cmdmap ( ) ; 

Dans le prochain exemple, la page 1203 n'est pas copiee dans la page 303, mais au meme 
niveau, directement apres la page (303). 

$cmd = array ( ) ; 

$cmd[ 'pages' ] [1203] [ 'copy' ] = -303; 
$tce->start (array ( ) , $cmd) ; 
$tce->process_cmdmap ( ) ; 

Vous pouvez specifier plusieurs options dans les commandes. Par exemple, I'option copyTree 
fixe la profondeur (le nombre de niveaux) des pages copiees. 
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$cmd = array ( ) ; 

$cmd[ 'pages' ] [1203] [ 'copy' ] = 303 ; 
$tce->copyTree = 3 ; 
$tce->start (array ( ) , $cmd) ; 
$tce->process_cmdmap ( ) ; 

La profondeur est ici fixee a trois niveaux de sorte que la page 1203 est eopiee, de meme que 
ses sous-pages sur les trois premiers niveaux. Pour d'autres options, consultez la documenta- 
tion a la reference du debut de cette section. 

Donnees (datamap) 

Le tableau datamap sert a manipuler ou a creer des enregistrements. Son format est le suivant : 
$cmd[nom de la table][uid][nom du champ] = valeur 

nom de la table 

Norn de la table de la base de donnees a traiter ; la table doit etre definie dans le TCA. 

uid 

L'uid de I'enregistrement a modifier; si on cree un nouvel enregistrement, I'uid doit 
contenir une certaine valeur avec le prefixe NEW. 
nom du champ 

Nom du champ de la base de donnees a modifier ; ce champ doit etre defini dans le TCA. 

valeur 

Nouvelle valeur du champ. 

L'exemple suivant illustre le fait que plusieurs enregistrements peuvent etre edites ou crees en 
meme temps : 

$data [ 'pages '][ 'NEW9823be87 ' ] = array! 
'title' => 'Page 1' , 
'pid' => '45' 

) 

II faut d'abord creer une nouvelle page avec le titre "Page 1" dans la page pour laquelle uid=45. 

$data[ 'pages' ][ 'NEWbe68s587 ' ] = array ( 
' title ' => ' Page 2 ' , 
'pid' => '-NEW9823be87' 

) 

Une deuxieme page est a present creee apres la nouvelle page, et sur le meme niveau, avec le 
pseudo-uid NEW9823be87. Le concept d'uid negatif est utilise de la meme maniere que pour 
cmdmap. 

$data[ 'pages' ] [9834] = array! 

'title' -> 'Nouveau titre pour cette page', 
'subtitle' -> 'Nouveau sous-titre' 

) 

$tce->start ($data, array ( ) ) ; 
$tce->process_datamap ( ) ; 

Pour terminer, nous changeons le titre de la page dont l'uid est 9834. 
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Clear cache 

Le TCE fournit egalement des fonctions pour manipuler le cache. 
$tce->clear_cacheCmd($cacheCmd); 

Les commandes suivantes peuvent etre entrees dans $cacheCmd : 
page id 

supprime le cache pour la page specifiee 
'pages' 

supprime le cache pour toutes les pages 

'all' 

supprime tous les caches 
tce_db.php 

Les fonctions fournies par le TCE peuvent aussi etre appelees par le script typo3/tce_db.php. 
Les tableaux datamap et cmdmap sont passes en parametres via GET ou POST avec data[] et 
cmdQ. Un exemple typique de I'utilisation detce_db.phpsetrouvea la section 7.8.2 : fonctions 
de sous-module Web — » Fonctions — » Assistants. 

7.4. 1 0 SQL et tables definies dans le TCA 

Mors que la manipulation des donnees dans la base de donnees est executee via le TCE pour 
garantir la coherence des donnees, les requetes de base de donnees sont realisees directement 
par SQL. Cependant, un certain nombre d'elements sont a prendre en consideration ici. D'une 
part, les permissions d'acces doivent etre prises en compte et d'autre part, vous devez vous 
assurer que les enregistrements sont actifs (caches, supprimes, . . .). 

Dans les modules backend, la variable $this->perms_clause est precedee d'une condition SQL- 
WHERE qui, appliquee a la table pages, selectionne uniquement les pages auxquelles I'utilisa- 
teur backend actuel a acces. 

II faut aussi voir si un enregistrement est actif ou non. Dans le backend, cela revient a verifier 
si I'enregistrement est supprime ou non. Si vous definissez un champ qui marque I'enregistre- 
ment comme supprime, comme dans le cas de la table tt_content, alors ce champ doit etre 
pris en consideration pour que de tels enregistrements ne soient pas affiches dans le backend. 

$TCA[ ' tt_content ' ][ 'Ctrl' ][ 'delete' ] => 'deleted' 

Une instruction WHERE est creee pour le backend avec la fonction suivante : 

$deleteClause = t31ib_BEfunc : : deleteClause ( ' table_name ' ) ,- 

II existe une methode similaire pour le frontend dans I'objet TSFE : 

$deleteClause = $TSFE->sys_page->deleteClause ( ' table_name ' ) ; 

De plus, il existe une serie de champs qui definissent la validite de I'enregistrement pour le 
frontend. Ces champs sont utilises pour cacher I'enregistrement, pour le laisser apparaitre un 
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certain temps, ou pour definir les permissions d'acces pour les groupes d'utilisateurs frontend. 
Tous ees champs sont appeles enable fields. Vous pouvez creer une instruction WHERE cor- 
respondante dans les methodes suivantes. Dans ce cas, le code deleteClause() ne doit plus etre 
repris, car la clause tenant compte des enregistrements supprimes est deja incluse. 

$enableFields = $TSFE->sys_page->enableFields ( ' table_name ' ) ; 
$enableFields = $this->cObj ->enableFields ( ' table_name ' ) ; 

A I'interieur des plugins, c'est cette derniere methode qui est utilisee, de sorte qu'une requete 
ressemble a peu pres a ceci : 

$res = $GLOBALS [ 'TYP03_DB' ] ->exec_SELECTquery ( 

$table, 

'pid IN ( ' .$pidList. ' ) ' ■ 

$this->cObj->enableFields ($table) , 

'crdate DESC ) ; 

while ( $row = $GLOBALS [ ' TYP03_DB ' ] ->sql_f etch_assoc ( $res ) ) { 

Reference 215109 La requete de base de donnees est realisee par les methodes de I'objet $GLOBALS['TYP03_DB']. 

TYP03 implemente une couche d'abstraction de base de donnees (DBAL pour database abs- 
traction layer) via cette interface. L'API se trouve dans la classe t3lib_DB. Une description du 
DBAL est disponible a la reference ci-contre. 

Si enableFields() ou deleteClausef) sont utilises correctement dans les requetes SQL, vous ne 
devez pas vous soucier de savoir quels champs et quelles fonctions sont definis pour la table 
dans le TCA. Si les champs starttime et endtime sont ajoutes a la table par la suite (via les 
entrees correspondantes dans le TCA), ils seront inclus dans les requetes sans devoir changer le 
code PHP du plugin, pour autant qu'un plugin utilise enableFields() pour les requetes de base 
de donnees. 

7.4.1 1 Utilisateurs, sessions et identification 

Reference 358205 TYP03 tient compte des permissions sur les pages, des enregistrements et des fichiers selon le 
profil d'utilisateur. Un utilisateur qui veut acceder a une ressource doit bien sur etre connu. 
Ceci implique deux aspects essentiels : d'une part, il faut pouvoir authentifier un utilisateur, 
c'est-a-dire reconnaTtre I'identite d'un utilisateur donne. Ceci est generalement realise a I'aide 
d'un formulaire d'identification, en verifiant le nom d'utilisateur et le mot de passe. D'autre 
part, il faut pouvoir identifier continuellement un utilisateur : puisque HTTP est un protocole 
sans etat, a chaque page appelee, il faut pouvoir determiner si I'utilisateur est deja connu et 
si les donnees en question sont reservees a I'utilisateur. Cette surveillance de I'utilisateur est 
appelee une session. 

Un exemple typique illustrant les differences entre ces deux fonctions est celui de I'Online 
Shop. Alors que le panier d'achat virtuel est une fonction de la session, I'utilisateur doit s'au- 
thentifier au plus tard lors du traitement de la commande (dependant du magasin) : cela 
permet de I'identifier. 
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Dans le contexte des applications Web, nous definissons trois types d'utilisateurs : 

■ les utilisateurs non-identifies 

■ les utilisateurs identifies (session utilisateur sans authentification) 

■ les utilisateurs authentifies 

Tandis que pour le baekend, il est essentiel que I'utilisateur soit authentifie, les trois types 
d'utilisateurs peuvent entrer en ligne de compte dans le frontend. La plupart des sites Web 
sont accessibles sans identification, et ne dependent pas non plus des sessions utilisateurs. 
Cela signifie qu'ils sont completement fonctionnels pour des utilisateurs non-identifies. 

Toutefois, si des donnees relatives a I'utilisateur sont collectees lors d'une visite du site Web 
(comme pour les paniers d'achat virtuels), il faut configurer une session. Dans une session, un 
utilisateur est suivi lors de sa visite dans le site Web. Ce statut n'est pas le meme que celui de 
I'authentification, puisque I'identite de I'utilisateur ne doit pas etre connue dans ce cas-ci. 

L'acces a des ressources precises (pages ou elements de contenu) est controle via les groupes 
d'utilisateurs. Pour ce faire, I'utilisateur doit etre authentifie. Sans session utilisateur, I'authen- 
tification ne peut etre appliquee de maniere sensee. 

Une session utilisateur reconnue au moyen d'un cookie a ete creee automatiquement par 
TYP03. Ce cookie contient seulement un ID, et done, ne contient pas de donnees sur I'utili- 
sateur. Celles-ci sont stockees dans la base de donnees et sont lues apres identification du 
cookie ; el les contiennent egalement des donnees pour la session. Ces donnees sur I'utilisateur 
sont aussi utilisees pour sauver le statut de I'authentification, ce qui explique qu'un utilisateur 
donne ne doive s'authentifier qu'une seule fois par session. 

Voici un resume de I'identification d'un utilisateur frontend : 

■ Un ID d'utilisateur existant est detecte au moyen d'un cookie. 

■ Si ND n'existe pas, I'authentification est validee en verifiant le nom d'utilisateur et le mot 
de passe fournis. 

■ Un cookie contenant I'lD d'utilisateur est alors cree. 

■ Si I'utilisateur est authentifie, les donnees sur I'utilisateur sont lues. 

■ Les donnees de la session sont lues ; par exemple, dans le cas d'un magasin, elles pourraient 
contenir les entrees d'un panier d'achat virtuel. 

L'utilisation de cookies dans le frontend peut etre desactivee par la configuration suivante : 

$TYP03_CONF_VARS [ ' FE ' ] [ ' dontSetCookie ' ] = 1 ; 

Afin de pouvoir toujoursauthentifier des utilisateurs et utiliser des sessions, vous pouvez confi- 
gurer I'option config.ftu (Frontend Track User) dans le setup TypoScript qui permet d'identi- 
fier un utilisateur au moyen des parametres fournis. Mais gardez a I'esprit le fait que les plugins 
qui ne generent pas de liens en utilisant correctement les fonctions du systeme peuvent ter- 
miner une session ; e'est pourquoi l'utilisation de cookies est recommandee. 

La gestion des sessions, I'authentification et le fait de fournir des donnees utilisateurs sont des 
actions controlees par les classes t3lib_*userAuth et tslib_feUserAuth. Apres I'identification, 
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et I'authentification si necessaire, un objet de ces classes est mis a votre disposition. Cet objet 
garde les donnees concernant I'utilisateur dans le tableau ->user[]. II contient des methodes 
pour acceder aux donnees de la session ou pour verifier les permissions d'utilisateur. 

Les objets d'utilisateur dans le frontend et le backend sont tres similaires dans leur structure 
de base, etant donne que c'est la meme classe de base qui est utilisee pour les deux. Mais il 
y a une difference entre eux, particulierement dans les methodes. Par exemple, la methode 
->isAdmin() est disponible dans le backend, mais pas dans le frontend, puisqu'il n'y a pas 
d'utilisateur « administrateur » dans ce cas. 

Les objets d'utilisateur sont disponibles dans les variables globales suivantes : 

$GLOBALS[TSFE']->fe_user 

Objet d'utilisateur frontend 

$GLOBALS['BE_USER'] 

Objet d'utilisateur backend 

Voici quelques exemples de code impliquant les objets d'utilisateur. 
Frontend 

global $TSFE; 

$mySessionData = $TSFE->f e_user->getKey ( ' ses ' , $mySessionKey ) ; 
$mySessionData = ... 

$TSFE->f e_user->setKey ( ' ses ' , $mySessionKey , $mySessionData) ; 
$TSFE->f e_user->storeSessionData ( ) ; 

Cet exemple montre comment les donnees de la session sont sauvegardees dans les plugins. Les 
donnees peuvent etre sous n'importe quel format puisqu'elles sont enregistrees via la fonction 
(serializeO) et restaurees de maniere correspondante par le systeme. Les donnees sont iden- 
tifies via une cle. II est de bonne pratique d'utiliser dans ce but le nom du plugin, a savoir ici 
$this->$prefixld. 

SuserlD = $TSFE->f e_user->user [ 'uid' ] ; 
$username = $TSFE->f e_user->user [ ' username ' ] ; 

Si un utilisateur est authentifie dans le frontend, alors ses donnees sont disponibles dans le 
tableau user[]. 

$userTScon£ = $TSFE->f e_user->getUserTSconf ( ) ; 

Les donnees TSConfig sont disponibles via getUserTSconf(). 
Backend 

global $BE_USER; 

SuserlD = $BE_USER->user [ 'uid' ] ; 

Le tableau user[] est disponible dans I'objet d'utilisateur qui contient les donnees concernant 
I'utilisateur. 
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$userIsAdmin = $BE_USER->isAdmin ( ) ; 

Verifiez si I'utilisateur a le statut d'administrateur avec isAdmin(). 

$uc_titleLen = $BE_USER->uc [ ' titleLen ' ] ; 

La configuration de I'utilisateur est sauvegardee dans le tableau uc[] {User Config). Vous y 
trouverez par exemple des donnees issues du module Utilisateur — ► configuration mais aussi 
des parametres de modules, qui sont automatiquementsauves dans ce tableau par la classe de 
base t3lib_SCbase et restaures au prochain appel de ce module (voir la section Framework des 
modules). Les exemples ci-dessus ne presentent qu'une partie de I'API Utilisateur. Vous avez de 
I'information supplementaire a votre disposition sur I'implementation des objets d'utilisateur 
a la reference de cette section. 

7.4.12 Programmation TYP03 et plate-forme 

En theorie, TYP03 fonctionne sur toutes les plate-formes sur lesquelles PHP fonctionne. II y Reference 279507 
a toutefois certaines differences selon la plate-forme, la version PHP et la configuration du 
serveur utilisees. Plusieurs fonctions PHP manquent ou se comportent differemment jusqu'a 
un certain point, surtout sous Windows. 

TYP03 fournit dans son API des fonctions qui aplanissent la plupart de ces differences. Si, en 
outre, vous suivez certaines conventions, vos extensions devraient fonctionner sans probleme 
dans differents environnements. 

Variables du serveur et variables d'environnement 

Si vous voulez acceder aux variables du serveur, n'utilisez jamais getenv() ou meme $HTTP_ 
SERVER_VARS, utilisez plutot la fonction t3lib_div::getlndpEnv(). Cette fonction reunit les 
variables connues du serveur et el le fournit de I'information supplementaire. 

Certaines de ces variables ont trait a I'adresse URL de la page courante. L'URL se decompose 
comme suit : 

[protocole]://[hote][:[port]][chemin][?[requete]] 
L'URL suivante est utilisee en guise d'exemple : 

http://www.example.net:80/t3livre/index.php?id=26&tx_myext[myparam]=1234 

L'installation TYP03 se trouve dans le repertoire /var/www/t3livre/ alors que le repertoire de 
base du serveur Web est /var/www/. 

Information generale 

REMOTE_ADDR 

Adresse IP du poste client (navigateur). 

REMOTE_HOST 

Norn d'hote du poste client (navigateur). 
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HTTP_USER_AGENT 

Contient le type et le nom du client appelant (navigateur). 

Exemple : User-Agent: Mozilla/5.0 (X1 1 ; U; Linux i686; de-AT; rv:1 .6) Gecko/2004041 1 
Debian/1.6-5 

HTTP_ACCEPT_LANG UAG E 

Les langues acceptees ou demandees par le client appelant (navigateur). 
Exemple : de-de,en-gb 

HTTP_HOST 

[hote][:[port]] - I'hote requis par le client. 
Exemple : www.example.net:80 

TYP03_HOST_ONLY 
[hote] 

Exemple : www.example.net 

TYP03_PORT 
[port] 

Exemple : 80 

HTTP_REFERER 

[protocole] ://[hote][:[port]][chemin][?[requete]] 

L'URL par laquelle la page courante a ete appelee. 

URL 

SCRIPT_NAME 

[chemin+fichier] - le nom du script et le chemin de I'URL 
Exemple : /t3livre/index.php 

QUERY_STRING 

[requete] - la chaine de caracteres de la requete. 
Exemple : id=26&tx_myext[myparam] = 1234 

TYP03_SITE_SCRIPT 

[fichier][?[requete]] - le fichier script appele avec la chaine de caracteres de la requete. 
Exemple : index.php?id=26&tx_myext[myparam]=1234 

TYP03_REQUEST_URL 

[protocole]://[hote][:[port]][chemin][?[requete]] - I'URL complete. 

TYP03_REQUEST_H0ST 

[protocole] ://[hote] [: [port]] 
Exemple : http://www.example.net:80 

TYP03_REQUEST_SCRIPT 

[protocole] ://[hote][:[port]] [chemin+fichier] 

Exemple : http://www.example.net:80/t3livre/index.php 
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TYP03_REQUEST_DIR 

[protocole] ://[hote] [:[port]] [chemin] 

Exemple pour un module backend : http://www.example.net:80/t3livre/typo3/ext/ 
cc_beinfo/modl/ 

TYP03_SHE_URL 

[protocole] ://[hote][:[port]] [chemin] - chemin de I'URL menant au site Web TYP03 
Exemple : http://www.example.net:80/t3livre/ 

Fichiers et repertoires 

TYP03_D0CUMENT_R00T 
[chemin] 

Chemin absolu vers le repertoire racine du site Web. 
Exemple : /var/www 

SCRIPT_FILENAME 

[chemin+fichier] 

Exemple : /var/www/t3livre/index.php 

Vous pouvez rendre les variables d'environnement visibles avec les extensions FE Debug/Info 
output (cc_feinfo)/Backend Environment Information (cc_beinfo). 

GET et POST 

Les donnees GET et POST sont disponibles a travers les variables $GLOBALS['HTTP_POST_ 
VARS'] et $GLOBALS['HTTP_GET_VARS']. Vous devriez neanmoins utiliser les fonctions sui- 
vantes : 

t3lib_div::_GET($var) 

t3lib_div::_POST($var) 

t3lib_div::_GP($var) 

Les fonctions _GET() et _POST() renvoient les donnees qui ont ete transmises par GET ou 
POST. Dans la plupart des cas, la maniere utilisee pour transmettre les donnees importe peu. 
C'est pourquoi vous pouvez utiliser la fonction _GP(). El le recherche, d'apres la cle passee en 
argument, d'abord dans les donnees POST et ensuite dans les donnees GET. Rappelez-vous que 
ces fonctions renvoient les donnees sans barre oblique : la fonction $GLOBALS['TYP03_DB'] 
->quoteStr() doit etre appliquee aux donnees avant qu'elles ne soient ecrites dans la base de 
donnees. 

A I'interieur des plugins, vous accedez aux parametres via $this->piVars[], pour que, normale- 
ment, vous n'ayiez pas a vous preoccuper des fonctions ci-dessus. 

Fichiers 

Lorsque vous manipulez des fichiers, notez que sur les systemes Windows, les fichiers texte et 
les fichiers binaires sont traites differemment. Mais dans la plupart des cas, cela n'est pas voulu 
et peut mener a des dysfonctionnements. Pour eviter ceux-ci, vous devriez toujours ouvrir ces 
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fichiers en mode binaire pour acceder aux fichiers en ecriture et en lecture. Le mode binaire 
est active en ajoutant la lettre b au parametre mode dans fopen(). 

$fp = fopen ($filename, 'rb'); 

PHP fournit la fonction tempnam() pour creer des fichiers temporaires, mais cela peut cau- 
ser des problemes si le Safe Mode est active pour PHP. Pour cette raison, TYP03 propose la 
fonction t3lib_div:tempnam() qui enregistre les fichiers temporaires dans typo3temp/. 

Le lancement de programmes externes est la source de problemes : le chemin du programme 
doit etre connu ou configure ; les fichiers executables sous Windows ont le suffixe .exe et la 
fonction is_executable() ne fonctionne pas sur les systemes Windows. Si vous voulez appeler 
Perl, par exemple, il y a plusieurs manieres de proceder : C:/perl/bin/perl.exe, /usr/bin/perl ou 
/usr/local/bin/perl. La classe t3lib_exec essaie de resoudre le probleme. L'appel suivant fournit 
le chemin complet vers I'interpreteur Perl : 

$cmd = t31ib_exec : : getCommand ('perl'); 

On peut alors acceder aux programmes sans configurer statiquement leur chemin. 

7.4.13 MultilinguisTne 

Reference 104717 TYP03 est disponible dans de nombreuses langues, a la fois dans le backend et dans le fron- 
tend. A tel point que les extensions que vous avez publiees dans le Repository pourraient etre 
traduites, par exemple, en swahili par un traducteur inscrit sans que vous I'ayiez prevu. Depuis 
quand n'avez-vous pas publie quelque chose dans six langues differentes ? 

Les textes des modules et les plugins dans d'autres langues sont contenus dans les fichiers 
correspondant au fichier d'exemple locallang*.php. Le Kickstarter vous aide en generant ce 
fichier lors de la creation de I'extension. Comme vous pouvez le voir dans I'exemple qui suit, 
un fichier locallang contient un tableau $LOCAL_LANG qui contient a son tour des tableaux 
avec les traductions dans differentes langues. 

$LOCAL_LANG = Array ( 

'default' => Array ( 

'todos_new' => 'Create new To-Do', 
' todos_update ' => 'Update To-Do', 
' todos_target ' => 'Target user', 
'todos_type' => 'Workflow', 

) , 

'dk' => Array ( 

'todos_new' => 'Opret ny opgave ' , 
' todos_update ' => 'Opdater opgave', 
' todos_target ' => 'Mal-bruger ' , 
'todos_type' => ' Arbejdsgang' , 

) , 

' de ' => Array ( 

'todos_new' -> 'Neue To-Do Liste anlegen', 
' todos_update ' -> 'To-Do-Liste aktualisieren' , 
' todos_target ' => ' Zielbenutzer ' , 
'todos_type' => 'Workflow', 

) , 

) ; 
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Au moment de I'execution, les textes sont crees dans la langue correspondante via les cles 
('todos_new', 'todos_update'). Ceci est implements dans les plugins par la methode $th is 
->pi_getLL() et dans les modules par la methode $LANG->getl_L(). Avee $LANG->getLL('to- 
dos_update'), par exemple, le texte « Update To-Do » est affiehe si I'utilisateur backend actuel 
a choisi la langue anglaise ou si aucune traduction n'est disponible pour la langue selectionnee. 

II est generalement admis que I'utilisation des textes des cles dans le code d'un programme 
est quelque peu fastidieuse, de meme qu'entrer le texte courant dans les fichiers locallang. 
Dans ce cas, vous pouvez utiliser I'extension ExtDevEval (voir la section 7.12 Outils pour le 
developpeur) pour extraire le texte du code et le remplacer avec les textes des cles. 

Comme nous I'avons deja mentionne, TYP03 offre egalement un support pour les sites Web 
multilingues au sein d'une seule arborescence de pages, via la table pages_language_overlay. 

On attribue les elements de contenu aux differentes langues definies dans la table sysjan- 
guage en specifiant la valeur du champ sys_language_uid de la table tt_content. 

II n'y a pas de support special pour ce concept pour les donnees des plugins. Mais I'experience 
montre que les capacites multilingues sont rarement necessaires pour les donnees des plugins. 
Le moyen le plus simple est generalement d'utiliser un SysFolder different pour chaque langue 
pour les enregistrements du plugin. Bien entendu, il est aussi possible de creer les champs 
pour les langues requises dans la table. Cette procedure n'a d'interet que pour des applications 
particulieres. 

Une autre possibility est d'utiliser le concept de tt_content dans votre propre table. Pour ce 
faire, creez un champ sys_language_uid correspondant en vous inspirant de la definition TCA 
de tt_content. Vous aurez ensuite un champ de selection de la langue dans les enregistre- 
ments. Les enregistrements correspondant a la langue de la page courante sont alors choisis 
comme suit : 

SELECT . . . WHERE sys_language_uid= ' . $GLOBALS [ ' TSFE ' ] ->sys_language_uid . . . 

Si I'extension Static Info Tables est installee, vous accederez au code ISO-639 3 de la langue 
avec $GLOBALS['TSFE']->sys_language_isocode. 

7.4.14 Codage des caracteres 

Avant de parler des caracteristiques speciales de TYP03 en rapport avec le codage des ca- 
racteres, nous en posons les bases. Si vous etes deja familiarise avec ces principes, vous pouvez 
tout de suite passer a la section suivante. 

Les principes du codage de caracteres 

D'ordinaire, les gens ne se posent pas de questions en encodant des caracteres, et ce qu'on Reference 996712 
entend par la n'est meme pasclair en general. Apres tout, cela reste tres simple - vous appuyez 
sur la touche « 6 » (o umlaut) de votre clavier, et cette lettre apparait a I'ecran. Que devez- 
vous savoir de plus? Eh bien, il y a des annees, vous auriez peut-etre essaye de lancer votre 
machine a ecrire a roue d'impression ou votre imprimante matricielle par la fenetre, car elle 

3 http://en. wikipedia.org/wiki/ISO_639 
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ne voulait tout simplement pas imprimer les umlauts, et imprimait a la place des caracteres 
graphiques - nous voila face a un probleme de codage de caracteres. 

II est generalement admis que lorsqu'une lettre telle que « 6 » est sauvee, le caractere lui- 
meme est sauvegarde. Mais cela n'est pas vrai. Le caractere « 6 », par exemple, vient d'un jeu 
de caracteres TrueType et est affiche a I'ecran par le systeme d'exploitation. En fait, le « 6 » 
est encode et sauve sous forme de nombre et le caractere « 6 » est aussi represente par un 
nombre dans le jeu de caracteres par le systeme d'exploitation. L'aspect interessant ici est que 
ces deux nombres peuvent etre differents, mais que le « 6 » continue a s'afficher a I'ecran 
lorsque vous appuyez sur la touche « 6 » (qui a son tour peut etre representee par un nombre 
different). 

Ainsi, il ne suffit pas de connaTtre la valeur (le nombre) d'un caractere. Vous ne saurez de 
quel caractere il s'agit qu'a partir du moment oil vous connaissez le codage employe, c'est-a- 
dire le systeme utilise pour associer un nombre aux caracteres. Le premier codage standardise 
etait ASCII, qui utilise seulement sept bits (0-127) pour le codage, et qui ne contient meme 
pas les umlauts allemands. Puisque la plus petite unite d'enregistrement de donnee est I'oc- 
tet, avec 8 bits 4 , vous pourriez utiliser un bit supplemental et done definir 128 caracteres 
supplementaires. Ceci a mene finalement au codage ISO-8859 qui definit lesjeuxde caracteres 
suivants : 

ISO 8859-1 (Latin-1) - Ouest-europeen 

ISO 8859-2 (Latin-2) - Est-europeen 

ISO 8859-3 (Latin-3) - Sud-europeen et esperanto 

ISO 8859-4 (Latin-4) - Baltique 

ISO 8859-5 - Cyrillique 

ISO 8859-6 - Arabe 

ISO 8859-7 - Grec 

ISO 8859-8 - Hebreu 

ISO 8859-9 (Latin-5) - Turc au lieu d'islandais, autrement le meme que Latin-1 

ISO 8859-10 (Latin-6) - Nordique 

ISO 8859-11 -Thailandais 

ISO 8859-12 - Celtique (jamais choisi) 

ISO 8859-13 (Latin-7) - Baltique (remplace Latin-4 et -6) 

ISO 8859-14 (Latin-8) - Celtique 

ISO 8859-15 (Latin-9) - Ouest-europeen avec le caractere Euro 
ISO 8859-16 (Latin-1 0) - Sud-europeen avec le caractere Euro 

Tous ces jeux de caracteres ont en commun le US-ASCII comme codage des 128 premiers 
caracteres. Les 128 caracteres suivants different selon le codage utilise. En Europe de I'Ouest, 
le codage ISO 8859-1 est normalement utilise. II s'appelle aussi Latin-A et contient les umlauts 
allemands par exemple. Mais I'alphabet grec n'est pas inclus dans ce jeu de caracteres. Cet 
alphabet est defini dans ISO 8859-7 qui ne contient pas d'umlauts. Cela signifie qu'il n'est pas 
possible d'utiliser des umlauts et des lettres grecques dans le meme texte. 

La table suivante illustre ceci ; elle montre quatre caracteres et compare les differents codages. 

4 II est eventuellement possible d'utiliser la longueur de bits que vous voulez. En fait, d'autres longueurs de bits 
que le 8-bit sont utilisees dans differentes applications et processeurs specialises. 
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Caractere 


HTML 


Unicode 


ISO 


ISO 


DOS CP 


Unicode 


Unicode 






en HTML 


8859-1 


8859-7 


850 




UTF-8 


6 


&ouml ; 


&#246 ; 


0xF6 




0x93 


U+00F6 


0xC3B6 


<P 


&phi ; 


φ 




0xF6 




U+0278 


0xC9B8 




Scdivide ; 


&#247 ; 


0xF7 




0xF6 


U+00F7 


0xC3B7 


i) 


&bdquo ; 


&#8222 ; 








U+201E 


0xE2809E 



Tableau 7.2: 
Comparaison du 
codage pour quelques 
carateres 



Guillemet-virgule double inferieur 

La table est peut-etre un peu confuse au premier abord, mais sa signification devrait etre plus 
claire apres cet exemple 5 : 

Nach der Erfindung der Telegrafie benotigte man auch 
hier eine Zeichenkodierung. Aus den ursprunglichen 
Ideen des Engenders Alfred Brain entstand 1837 der 
Morsecode. 

Pour ceux qui ne connaissent pas I'allemand, voici la traduction : 

Apres I'invention du telegraphe, le codage de caracteres eta it necessaire. Le code 
Morse a ete cree en 1837, d'apres les idees de lAnglais Alfred Brain. 

En plus des caracteres definis dans US-ASCII, ce texte contient aussi des umlauts (6, u et a). 
Admettons que ce texte ait ete ecrit avec un editeur de texte sur un systeme utilisant le codage 
ISO 8859-1 et qu'il ait ete sauve dans un fichier. Si ce fichier est transfere sur un ordinateur 
sur lequel la version allemande du systeme d'exploitation DOS est lancee, et qu'il y est ouvert 
dans un editeur, vous verrez alors ceci : 

Nach der Erfindung der Telegrafie benn-tigte man auch 
hier eine Zeichenkodierung. Aus den urspr 3 nglichen 
Ideen des Engenders Alfred Brain entstand 1837 der 
Morsecode. 

Que s'est-il passe ? Les donnees n'ont pas change, le texte a juste ete affiche en se basant sur 
la codepage 850 de DOS. Le « 6 » a ete sauve avec le codage ISO 8859-1, c'est-a-dire avec la 
valeur 0xF6 (hexadecimal). Dans la codepage 850 de DOS, toutefois, la valeur 0xF6 est reservee 
a un autre caractere, a savoir le « » comme vous pouvez le voir dans le tableau ci-dessus. 

Si le texte est affiche par erreur avec le codage ISO 8859-7, vous obtiendrez le resultat suivant : 

Nach der Erfindung der Telegrafie benotigte man auch 
hier eine Zeichenkodierung. Aus den urspronglichen 
Ideen des Engenders Alfred Brain entstand 1 837 der 
Morsecode. 

5 Souree : http://en.wikipedia.org/wiki/characterencoding 
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lei, la valeur 0xF6 produit la lettre grecque « phi », c'est pourquoi le texte ci-dessus ne contient 
toujours pas le caractere desire. Vous devez done toujours savoir quel eodage a ete utilise pour 
les donnees. Pour cette raison, le codage est specifie dans les en-tetes des pages HTML. 

<head> 

<meta http-equiv=" content-type" content^ " text/html ; charset=ISO-8859 -1 " > 

Comme vous le voyez sur le tableau, il est impossible d'utiliser les caracteres « 6 », « » 
et « (p » simultanement dans un texte. Pour resoudre ce probleme, le systeme Unicode a ete 
introduit afin d'inclure tous les caracteres. 

L'avantage est qu'il n'y a qu'un systeme de caracteres qui contient tous les caracteres dans le 
monde (en admettant qu'ils aient deja ete definis dans Unicode). Mais puisqu'il y a plus de 256 
caracteres differents (ce qui correspond a 1 octet), nous avons besoin de deux ou meme de 
quatre octets pour identifier un caractere. Cela signifie que lorsque vous sauvez des donnees, 
vous consommez jusqu'a quatre fois plus d'espace. Puisque ceci est incompatible avec d'autres 
codages, qui sont generalement bases sur US-ASCII, UTF-8 a ete introduit. UTF-8 est pour ainsi 
dire Unicode avec un codage a 1 octet (8 bits). Dans ce codage, US-ASCII est stocke avec 
un seul octet. Cela veut dire qu'UTF-8 utilise un nombre variable d'octets pour enregistrer 
les donnees, mais generalement un seul octet si les donnees consistent en du texte compose 
majoritairement de lettres de a a z ou de A a Z. Meme si certaines applications ne supportent 
pas encore Unicode, il est previsible que ce codage deviendra un standard et que, tot ou tard, 
tous les autres disparaitront. La pratique nous indique toutefois que c'est principalement la 
version UTF-8 du codage Unicode qui est utilisee pour enregistrer et transmettre des donnees, 
alors que le codage UCS-2 (2 octets) est frequemment utilise pour le traitement interne. 

Differents codages de caracteres dans TYP03 

Si vous ne le configurez pas differemment, TYP03 utilise le codage ISO 8859-1 qui semble 
etre adequat pour la plupart des utilisateurs dans le monde occidental. Cependant, meme les 
guillemets typographiques utilises en Allemagne ( ) ne peuvent etre affiches avec ce codage. 
Microsoft Windows utilise le codage Windows- 1252 qui est identique dans les grandes lignes 
a ISO 8859-1 mais qui contient les guillemets allemands. Ainsi, il n'y a aucun probleme pour 
utiliser ces caracteres lorsque vous ecrivez du contenu. 

On evite ce probleme pour I'affichage dans le frontend en se rabattant sur le codage HTML 
des caracteres speciaux et en utilisant „. Mais lors de la sauvegarde, ce codage devrait 
aussi etre utilise, puisque les donnees de la base de donnees sont encodees avec ISO 8859-1. 
Des que vous voudrez utiliser les donnees pour un affichage dans un autre format que HTML, 
des problemes vont survenir. 

A propos, TYP03 utilise un codage different d'ISO 8859-1 pour certaines langues dans le ba- 
ckend, de facon a pouvoir afficher les caracteres pertinents. Si vous utilisez le grec comme 
langue dans le backend, le codage ISO 8859-7 sera utilise pour entrer et sauver du contenu 
dans la base de donnees. Pour vous assurer que les elements de contenu entressont reproduits 
correctement dans le frontend, vous devez configurer les sites en consequence via TypoScript. 

config .metaCharset = iso-8859-7 
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Pour standardiser et simplifies il faudrait utiliser UTF-8 pour le codage des caracteres dans 
TYP03. Tous les navigateurs modernes supportent ee codage, de sorte qu'aucune conversion 
n'est necessaire pour I'affichage. Si de vieux navigateurs comme Netscape 4 ou Internet Ex- 
plorer 4 sont supportes dans le frontend, les pages doivent etre delivrees separement pour ces 
navigateurs. Sinon, vous devrez vous passer de UTF-8, puisque cela pourrait aussi vous causer 
des problemes dans ce cas. 

Vous pouvez utiliser UTF-8 a partir de la version 3.6 de TYP03. Cependant, nous ne pouvons 
vous recommander I'utilisation d'UTF-8 avec cette version, car certains problemes mineurs 
doivent encore etre resolus. Cette section doit done etre consideree comme une perspective. 

Pour activer UTF-8 pour TYP03, vous devez configurer I'option forceCharset via I'outil d'ins- 
tallation, ou directement dans typo3conf/localconf.php : 

$TYP03_CONF_VARS [ 'BE' ] [ ' f orced_charset ' ] = 'utf-8'; 

Le backend, et done le stockage des donnees dans la base de donnees, supporte a present le 
codage UTF-8. II doit toujours etre reconnu par la base de donnees. L'outil d'installation de 
TYP03 ne peut pas encore faire cela automatiquement, et vous devez done executer vous- 
meme la configuration avec les commandes SQL correspondantes. Pour MySQL 4.0 6 , le codage 
d'une table est modifie comme suit : 

ALTER TABLE table-name CHARACTER SET Utf8; 

L'option TypoScript suivante doit etre activee dans le setup pour avoir un affichage encode 
avec UTF-8 dans le frontend : 

conf ig.metaCharset = utf-8 

De cette maniere, UTF-8 est utilise de maniere universale pour I'encodage des caracteres en 
TYP03, et les textes du fichier de langues locallang sont automatiquementtransformes dans le 
codage ad hoc via les methodes getLL() (BE) et pi_getLL() (FE) correspondantes. Evidemment, 
les gabarits HTML doivent eux aussi utiliser le codage correspondant ; surtout s'ils contiennent 
du texte, un encodage errone dans le frontend menerait dans le cas contraire a un affichage 
incorrect. 

II reste encore a savoir comment les donnees, e'est-a-dire le texte, seront traitees et a reperer ce 
qui doit etre pris en compte. Des problemes peuvent apparaitre ici pour les raisons suivantes : 
puisque les textes encodes avec UTF-8 peuvent consister en plus d'octets que de lettres qu'ils 
symbolisent, des singularit.es sont attendues lors du traitement. Par exemple, la fonction PHP 
strlen() fournit la longueur du texte a partir du nombre d'octets requis pour le sauver. Avec les 
textes encodes avec UTF-8, cela peut provoquer une difference entre la taille reelle du texte 
et le resultat de la fonction strlen(). Pour cette raison, le codage utilise doit etre reconnu par 
la base de donnees. Par exemple, une recherche lancee dans laquelle aucune distinction n'est 
faite entre minuscules et majuscules peut etre faussee si le codage UTF-8 est utilise. 

TYP03 lui-meme fournit la classe t3lib_cs pour convertir les differents encodages des ca- 
racteres, puisque PHP ne contient pas les fonctions necessaires dans chaque installation. Une 

6 Le support de base de donnees pour UTF-8 est disponible dans MySQL a partir de la version 4. 
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API pour les plugins utilisee de maniere transparente, par exemple une fonction strlen() dans 
tslib_pibase, n'a cependant pas encore ete introduite. Cette API est necessaire pour commen- 
eer a developper des plugins, qui peuvent manipuler du texte independamment du codage. II 
est probable que des solutions existent deja a I'heure oil vous tenez ce livre entre vos mains. 
De I'information mise a jour est disponible a la reference de cette section. 

7.5 Programmer dans le frontend : les principes 

Par frontend, nous entendons generalement I'extension CMS, qui se trouve dans le repertoire 
typo3/sysext/cms/, et qui est accessible dans le repertoire principal d'un site Web TYP03 via le 
lien symbolique tslib. 

Des fonctionnalit.es peuvent etre adjointes au backend ou au frontend par le developpement 
d'extensions. Une large gamme d'extensions (plugins) est deja offerte par le Kickstarter, ce qui 
vous permet de mettre en place les votres rapidement. Les extensions du frontend sont dans 
certains cas limitees a quelques lignes de TypoScript, mais elles peuvent aussi constituer une 
veritable application PHP impliquant plusieurs bases de donnees. 

7.5.1 Frontend : restitution du contenu 

Nous vous donnons ici un apercu du processus de restitution de contenu d'une page, ce qui 
est en principe la tache du script tslib/index_ts.php. 

■ Durant la phase d'initialisation, les constantes sont fixees, la connexion a la base de donnees 
est etablie et les bibliotheques du frontend sont integrees. 

■ L'objet global $TSFE de la classe tslib_fe est cree. II controle le processus de restitution de 
contenu. 

■ L'objet pour I'authentification d'un utilisateur frontend et pour la gestion de session est 
cree. 

■ Si un utilisateur backend est actif, des fonctions eomplementaires telles que I'edition dans 
le frontend et le panneau d'administration sont initialises. 

■ L'lD et le type de la page appelee sont determines. Dans le meme temps, les permissions 
d'acces sont verifiees. 

■ Le moteur TypoScript de gabarit (TSFE, TypoScript Template Engine) est initialise. 

■ Le cas echeant, la page est lue a partir du cache dans la base de donnees. 

■ Le tableau config est initialise a partir du Setup TypoScript (config.*). 

■ Les donnees principales du TCA sont lues. 

■ La langue est determinee (cf. section 7.4.13). 

■ Les donnees transmises, telles que celles d'un formulaire email, sont traitees. 

■ Si la page n'est pas lue a partir du cache, die est restituee par la configuration TypoScript 
et enregistree dans le cache. 

■ Les objets (cObject) qui ne doivent pas etre mis en cache sont restitues et affiches dans le 
frontend : PHP_SCRI PT_I NT, USERJNT, PHP_SCRIPT_EXT. 
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■ La page restituee ($TSFE->content) est affiehee avec eeho(). 

■ Les donnees de session des utilisateurs frontend sont sauvegardees. 

■ Les logs sont enregistres. 

■ Le cas echeant, la redirection vers une adresse URL (jumpurl) est effectuee. 

■ Au cas oil la page est demandee par un utilisateur backend, un cadre contenant le message 
« preview » est insere. 

■ Un fichier HTML statique est enregistre si I'option correspondante a ete activee dans le 
panneau d'administration. 

■ Le panneau d'administration est insere si la configuration I'a specifie. 

■ Si une extension de debogage est installee, die est appelee pour modifier I'affichage en 
sortie. 

7.5.2 API frontend 

De meme que pour t3lib, des bibliotheques et des objets supplementaires sont disponibles dans 
le frontend. La restitution du contenu se base sur la structure d'objet suivante : 

$TSFE (tslib_fe) 
I 

> fe_user ( tslib_f eUserAuth) 

I 

> sys_page (t31ib_pageSelect) 

I 

> cObj (tslib_cObj) 

I 

> mypluginObj (extends tslib_pibase) 

I 

> c obj (tslib_cObj) 

Dans la majorite des cas, une extension frontend est un plugin qui etend la classe de base 
tslib_pibase. A partir d'un plugin, vous accedez done directement aux classes et aux objets 
suivants : 

tslib_fe 

Le TypoScript frontend (TSFE) est disponible en tant qu'objet global pour les plugins via 
$GLOBALS['TSFE']. 

tslib_cObj 

Est disponible en tant qu'objet pour les plugins via $this->cObj. II contient des methodes 
pour restituer les objets TypoScript tels que TEXT et IMAGE. De plus, les fonctions std- 
Wrap et parseFunc sont des methodes de cette classe. 

tslib_pibase 

Les plugins sont une extension de cette classe. Cette derniere fournit un ensemble de 
fonctions utiles aux plugins. 

t3lib_pageSelect 

Fonctions sur les pages. El les peuvent etre appelees dans le FE via I'objet $GLOBALS 
[TSFE']->sys_page. 



439 



7 Developpement d'extensions 



t3lib_div 

La serie de fonctions de t3lib_div est aussi disponible dans le frontend. 
Dans la suite, nous presentons une a une ces bibliotheques. 

7.5.3 TypoScript frontend (TSFE) 

Le TypoScript frontend (TSFE) est un objet disponible pour les plugins via la variable globale 
$TSFE. II contient de I'information, des methodes et des objets. Comme mentionne precedem- 
ment, le TSFE est I'objet central dans le processus de restitution du contenu. Pour la plupart 
des plugins, les objets tslib_pibase et cObj couvriront vos besoins. 

Vous trouverez ci-apres une partie des donnees et des objets du $TSFE. 

$TSFE->id 

uid de la page courante 

$TSFE->page[] 

Tableau contenant I'enregistrement de la page courante 

$TSFE->sys_page 

Objet avec differentes methodes s'appliquant aux pages 

$TSFE->additionalHeaderData[] 

Tableau contenant des donnees supplementaires a destination de I'en-tete HTML 

$TSFE->sys_language_uid 

ID de la langue courante 

$TSFE->tmpl 

Objet de gabarit TypoScript 

$TSFE->tmpl->setup[] 

Objet contenant I'ensemble de la configuration TypoScript 

$TSFE->pSetup[] 

Objet contenant la configuration TypoScript de I'objet de la page 

$TSFE->config[] 

Tableau de configuration (TS config) 

$TSFE->register[] 

Registre TypoScript 

$TSFE->cObj 

Objet central ; un objet cObject est disponible dans les plugins via $this->cObj. 

$TSFE->fe_user 

Utilisateur frontend courant (object) 

L'objet $TSFE fournit un certain nombre de methodes specialement reservees aux plugins : 

getStorageSiterootPidsO 

Renvoie un tableau contenant les valeurs _SITEROOT et _STORAGE_PID qui specifient 
respectivement les ID de la page et de la page racine du site Web, ainsi que I'endroit oil 
les enregistrements doivent etre stockes. 
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getPagesTSconfigO 

Cette methode renvoie le tableau TSConfig de la page en fonetion du rootline 

setJSO 

Specifie le code JavaScript, qui sera insere dans I'en-tete HTML 
setCSSO 

Specifie les donnees CSS qui seront inserees dans I'en-tete HTML 

uniqueHash() 

Genere une valeur de hachage unique 

set_no_cache() 

Active I'option pour que la page ne soit pas cachee 

set_cache_timeout_default() 

Fixe la duree apres laquelle la page est regeneree dans le cache 

L'extension FE Debug/Info output (cc_feinfo) vous fournit un plugin pour afficher dans le 
frontend les valeurs courantes de I'objet TSFE et d'autres donnees utiles. Ceci vous aide a 
deboguer ou a visualiser I'ensemble des donnees disponibles. 

7.5.4 cObject, tslib_cObj 

Un cObject (Content Object) est un objetTypoScript, com me par exem pie TEXT, IMAGE, HMENU. 
Ces objets sont instancies en PHP par la classe tslib_cObj (class.tslib_content.php). De plus, 
vous y retrouvez les fonctions telles que stdWrap ou parseFunc. 

Dans les plugins, vous aceedez a I'instance de tslib_cObj via $this->cObj. Cette reference a 
I'objet est definie automatiquement lors de Initialisation du plugin. Voici un apercu de I'API 
detslib_cObj : 

data[] 

Permet d'acceder a I'enregistrement courant (normalement de la table tt_content). 
cObjGetSingleO 

Restitue le cObject en fonetion du nom passe en argument (TEXT, IMAGE, ...) et de la 
configuration TypoScript. Vous trouverez plus de details a ce sujet a la section suivante. 

stdWrapO 

La fonetion standard pour les enveloppes [wrap). En appliquant les parametres de votre 
TypoScript, cette fonetion vous offre une large gamme de possibilites. Vous avez deja 
pu en juger lorsque nous avons aborde I'exemple « un compteur de visiteurs en 20 
minutes* (cf. section 7.1). 

enableFieldsfJ 

Cree une clause SQL WHERE qui selectionne uniquement les enregistrements valides 
dans le FE. On prend ici en compte les permissions d'acces et les champs Lancement et 
Arret. 

DBgetUpdateO 

Cree une commande SQL Update pour une table en tenant compte de la configuration 
de la table dans le tableau TCA. 
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DBgetlnsertO 

Comme pour DBgetlnsertO, mais pour I'insertion d'enregistrements. 



Arguments 

Dans leur mise en pratique en PHP, les objets de eontenu traitent de la meme maniere le 
passage d'arguments : 

function clmage($file,$eonf) 
function stdWrap($content,$conf) 
function ty po Li n k($ I i n ktxt, $conf) 

Le premier argument contient une valeur (par exemple une chame de caracteres), qui doit 
etre trait.ee. Le second argument est la variable $conf, qui determine le comportement de la 
methode. 

Les plugins respectent aussi cette convention, puisqu'ilssont instancies via USER ou USERJNT 
et qu'une methode prend comme arguments les variables $content et $conf. Cependant, dans 
la majorite des cas, la variable $content n'est pas utilisee et peut etre ignoree. 



Tableau $conf 

Le tableau $conf representee I'interface entre TypoScript et PHP. D'une part, il permet de confi- 
gurer le code PHP et d'autre part, en utilisant les cObjects a I'interieur du code PHP, vous 
pouvez modifier ou changer leur comportement. Nous avons deja illustre ce dernier point 
dans la restitution graphique du compteur de visiteurs (cf. section 7.1). 

En utilisant I'exemple du compteur de visiteurs, nous allons a present montrer le fonctionne- 
ment du tableau $conf. A la figure suivante, le TypoScript Object Browser vous presente la 
configuration TypoScript du compteur de visiteurs. 



Figure 7.28: 
Configuration TS dans 
le TypoScript Object 
Browser 



SETUP ROOT 

Efi...[config] 
□■.[plugin] 



£] .[user_Yisitcounter_pil] = USER_INT 

i [includel_ibs]=typo3conf /ext/user_visitcounter/pi 1 /class .user_visitcounter_pi l.php 

i [userFunc] =user_visitcounter_pi 1 - >main 
iltpid] 

i [data]=page:uid 

|3]..[i'enderObj]=COA 
Q...[10]=TEXT 

[field]=counter 
[noTrimWrap] = | | | 
□ ■[20]=TEXT 

[value]=visitor5 on this page 

&[lang] 

IT Seite 



Comme vous le constatez, le TypoScript a ete converti en une liste hiera rchique qui a deja ete 
decrite en detail precedemment. 
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La configuration TS est passee en argument a I'objet USERJNTdans plugin.user_visitcounter_ 
pi 1 . Voici $conf tel qu'il apparaTt a I'aide de la fonction debugO : 



indudeLibs 


typo3conf/ext/user_visitcounter/pil/class.user_visitcounter_pil.php 


userFunc 


user_visitcounter_pil->main 


pid. 


|data|page:uid| 


renderObj 


COA 


renderObj. 


10 


TEXT 




10. 


field [counter! 

noTrimWrap| 1 1 | 




20 


TEXT 




20. 


u a 1 u e 


visitors on this page 




lang. 


de Besucher auf dieser Seite| 


fr Visiteurs sur cette page | 



Figure 7.29: 
Affichage de $conf 
par debugO 



L'objet USERJNT n'aceepte que les deux arguments indudeLibs et userFunc, qui definissent la 
methode a appeler. Dans notre exemple, USERJNT appelle la methode user_visitcounter_pi1 
->main et passe en argument le tableau $conf qu'il a lui-meme recu. 

Comme vous le remarquez a la figure 7.29, l'objet USERJNT transfere les cles renderObj et 
renderObj. (avec le point a la fin). Les cles sans le point sont initialises via le signe « = » dans 
TS, generalement dans le but de definir le type d'objet. La meme cle avec le point « . » contient 
la configuration de l'objet. 

renderObj = COA 
renderObj { 

// dans l'objet renderObj. (avec le point) 

La seconde possibility est que le signe « = » fixe une valeur au lieu du type d'objet. Ce concept 
est illustre dans I'exemple ci-dessus par le parametre pid. Dans le tableau de configuration TS, 
seul pid. (avec un point) est disponible. Clairement, pid n'est pas defini avec le signe « = ». 
Observons la ligne TypoScript correspondante : 

pid. data = page:uid 

Dans le cas du parametre pid, vous ne devez pas le definir car il est de type stdWrap. II est 
done pris en charge par le code PHP du plugin. 

$pid = intval ( $this->cObj ->stdWrap ( $conf [ 'pid' ] , $conf [ 'pid. ' ] ) ) ; 

La fonction stdWrapO determine la valeur du pid. Si vous observez les parametres, vous re- 
connaTtrez les concepts de $content et $conf. Dans la configuration ci-dessus, $content et 
$conf['pid'] sont vides. La configuration est transferee avec $conf['pid.'] et contient alors data 
= page:uid. Cela signifie que la fonction stdWrapO recoit une valeur vide, mais qu'elle genere 
la valeur a renvoyer grace a la configuration de data. 

Les choses auraient ete differentes avec le TypoScript suivant : 

pid = 21 
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Dans ce cas, stdWrapf) aurait recu la valeur 21 ($content), mais pas de configuration ($conf). 
stdWrapO renvoie alors simplement 21. 

Dans I'exemple suivant, la valeur est transferee, mais elle est remplacee par override. 

pid = 21 

pid. override. data = register: user_visitcounter_pid 

Comme vous avez pu le constater, la eombinaison du TypoSeript et de PHP offre plusieurs 
facons de rendre le code PHP flexible, via la configuration de parametres. 

7.5.5 Restitution des cObjects par PHP 

Comme I'exemple du compteur de visiteurs I 'a montre, I'affichage d'un plugin peut aussi etre 
produit par des cObjects. Meme si un plugin genere une grande partie de I'affichage par lui- 
meme, avec la mise en forme controlee par CSS, il peut etre utile de controler certaines parties 
par TypoSeript : par exemple, pour I'affichage des images. 

$outputHTML = $this->c0bj->clmage($file, $conf [' image .']) ; 

La methode clmage() (IMAGE) restitue une image dans le frontend pour laquelle le nom du fi- 
chier est passe dans $file, en utilisant $conf['image.'] de la configuration TS. De cette maniere, 
vous pouvez par exemple modifier la taille de I'image avec TS. De plus, la balise <img> est 
generee. 

Dans le compteur de visiteurs, tout I'affichage est controle par un cObjects. Cette operation 
est realisee par le transfert de la configuration TS renderObj a la methode cObjGetSingle(). 
Cette methode restitue le contenu en fonction de la configuration, ou appelle la fonction 
de restitution de contenu pour le cObject en question. Par consequent, vous disposez d'une 
grande liberte pour la restitution du contenu. II est meme possible de definir un renderObj en 
tant qu'objet USER pour generer la sortie via un script externe. 

La methode determine le type d'objet a partir de $conf['renderObj'], ce qui signifie que ren- 
derObj peut etre de n'importe quel type (TEXT, IMAGE, COA, ...). 

// restitution du compteur par le TypoSeript renderObj 
$lCObj = t31ib_div: :makelnstance ( ' tslib_cObj ' ) ; 

$lCObj ->setParent ( $this->cObj ->data, $this->cObj ->currentRecord) ; 
$lCObj->start ($row, $ table ),- 

$content = $lCObj ->cObjGetSingle ( $con£ [' renderObj '] , 

$conf [ ' renderObj . ' ] ) ; 

Comme vous le remarquez, $this->cObj, qui est automatiquement disponible au sein des plu- 
gins, n'est pas utilise. En effet, I'objet travai I le avec les donnees qui appartiennent toujours 
a un cObject. En general, ces donnees sont les champs de I'enregistrement courant, qui est 
d'habitude contenu dans la table tt_content. 

L'exemple suivant montre une partie du TypoSeript de la configuration de I'element de contenu 
en-tete. Grace a field = subheader et a la configuration TS, vous pouvez directement acceder 
au champ subheader de I'enregistrement tt_content courant. 
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tt_content. header = COA 
tt_content. header { 

2 0.1 = TEXT 

20.1. field = subheader 

Dans le compteur de visiteurs, $this->cObj->cObjGetSingle() n'aboutirait a rien avec la confi- 
guration TS suivante, puisque les donnees ne proviennent pas de la table user_visitcounter, 
mais de I'enregistrement tt_content, qui insere le plugin dans la page. 

10 = TEXT 

10. field = counter 

Pour cette raison, on cree une instance locale de tslib_cObj. Ensuite, on ajuste avec $IC0bj 
->start($row, Stable) I'enregistrement courant en reprenant le dernier enregistrement du 
compteur de visiteurs qui a ete lu. Le TS ci-dessus donnera alors le resultat voulu. 

7.5.6 tslib_pibase 

TYP03 met a disposition la classe de base tslib_pibase pour les plugins du frontend. Les plugins 
crees par le Kickstarter sont bases sur tslib_pibase. Un plugin ne doit pas necessairement 
utiliser cette classe, mais cette derniere contient des methodes specialement destinees aux 
plugins. Parmi les methodes presentes, on notera celles relatives a la creation correcte des 
liens et au traitement des parametres. 

Voici la gamme des fonctions fournies par tslib_pibase : 

Reconnaissance des parametres 

tslib_pibase reconnaTt les parametres qui sont passes au plugin. La section suivante 
donne plus de details a ce sujet. 

Methodes pour les liens 

Methodes pour generer les liens avec ou sans parametres. El les sont aussi decrites plus 

en detail a la section suivante. 
Methodes pour les listes d'enregistrements 

Le Kickstarter peut creer des plugins qui listent deja des enregistrements et les affichent 

dans la vue detaillee du backend. tslib_pibase fournit les methodes de base a cet effet. 

Stylesheet et CSS 

Un certain nombre de methodes sont disponibles pour I'utilisation des CSS. Celles-ci 
tiennent compte de I'espace de nommage du plugin. 

Edition frontend 

Methode pour generer les elements d'edition du FE (icones) pour les enregistrements. 

Localisation, langues 

Support des plugins multilingues sur base du fichier de langues locallang. 
Acces a la base de donnees 

Methodes pour acceder a la base de donnees. 

Cache 

Support du cache pour les plugins avec des parametres. 
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Flexforms 

Support pour le traitement des donnees des Flexforms. 
Codage de caractere 

Methodes pour traiter les chaines de caracteres, en prenant en compte le eodage de 
caracteres. 

7.5.7 Liens et parametres dans les plugins 

En generant les liens au sein des plugins, deux principes doivent etre respectes: d'une part, les 
liens doivent avoir un format correct, en I'occurrence, les liens vers une page de TYP03 doivent 
comprendre I'lD et le parametre type. D'autre part, les parametres GET utilises doivent respecter 
la convention de nommage de I'extension pour eviter les conflits avec d'autres plugins. 

En outre, il existe plusieurs manieres d'afficher les URL dans TYP03. La premiere qui vaut la 
peine d'etre mentionnee est celle qui se presente sous une forme non encodee : 

index. php?id-123&tx_example_pil [showUid] -456 

En plus, I'option simulateStaticDocuments ou I'extension SpeakingURIs vous offrent d'autres 
possibilites de codage qui augmentent la lisibilite et ameliorent le referencement de votre site 
par les moteurs de recherche. 

La classe de base tslib_pibase de plugin vous donne un cadre pour la creation de vos URL et 
pour la gestion des parametres de vos plugins. Vous ne devez des lors plus vous soucier du 
format. 

L'exemple de code suivant montre les elements typiques d'un plugin genere par le Kickstarter 
en ce qui concerne la gestion des parametres. 

require_once (PATH_tslib. ' class . tslib_pibase .php' ) ; 
class tx_example_pil extends tslib_pibase { 
var $prefixld = ' tx_example_pil ' ; 

function main ( $content , $conf ) { 
$this->conf = $conf; 
$this->pi_setPiVarDefaults ( ) ; 

Tout d'abord, les parametres sont geres par $this->piVa rs []. Durant la phase d'initialisation, 
ce tableau est rempli par les parametres GET et POST correspondant a $this->prefixld. Le 
constructeur de la classe de base tslib_pibase assure cette tache automatiquement. 

function tslib_j?ibase ( ) { 
if ($this->prefixld) { 

$this->piVars = t31ib_div: :GParrayMerged($this->prefixId) ; 

} 

Si le plugin est appele via la methode main(), les valeurs par defaut pour les parametres sont 
fixees par TypoScript (via _DEFAULT_PI_VARS) a I'aide de la methode pi_setPiVarDefaults(). 
Mais ces valeurs sont remplacees par celles qui existent deja dans $this->piVars[]. 

Les possibilites suivantes existent pour la creation des URL ou des liens : 
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■ URL avec seulement I'lD et le type de la page 

■ URL avec des parametres specifiques 

■ URL avec des parametres selectionnes a partir de $this->piVars[] 

■ URL avec tous les parametres $this->piVars[] 

■ URL avec tous les parametres $this->piVars[] et les parametres supplementaires de rempla- 
cement 

Dans tous ces cas, des methodes de la classe de base tslib_pibase sont a votre disposition. Ces 
dernieres reposent elles-memes sur les methodes de liens de tslib_cObj qui sont mentionnees 
ici parsouci d'exhaustivite. 

$this->cObj ->getTypoLink ( $label , $params, $urlParameters-array ( ) , $target-'') 
$this->cObj ->getTypoLink_URL ( $params , $urlParameters-array ( ) , $target-' ' ) 
$this->cObj ->typoLink ( $linktxt , $conf ) 

Normalement, les methodes suivantes de la classe de base tslib_pibase devraient vous suffire. 
pi_getPageLink() 

Cette methode cree des URL pour un ID specifique de page. Vous pouvez specifier un 
tableau avec les parametres de I'URL 

pi_linkToPage() 

Comme pour pi_getPageLink(), mais un lien est cree (balise <a>) autour de la chame 
de caracteres passee en argument. 

Par opposition aux deux methodes preeedentes, les methodes suivantes prennent aussi en 
compte le cache, comme cela sera explique a la section suivante. 

pi_linkTP() 

Comme pour piJinkToPageO, a cette difference pres que le cache est pris en considera- 
tion. 

pi_linkTP_keepPlvars_url() 

Cree une URL, dans laquelle tous les parametres de piVars sont inclus. Les parametres 
peuvent etre remplaces ou ajoutes. 

pi_linkTP_keepPlvars() 

Idem que pour la methode precedente, mais cree un lien. 

pi_list_linkSingle() 

Cree un lien avec le parametre showUid, pour afficher un record en particulier. 

Une URL simple pour la page courante, a utiliser dans un formulaire par exemple, peut etre 
generee comme suit: 

$url = $this->pi_getPageLink ( $GLOBALS [ ' TSFE ' ] ->id) ; 

Le code suivant cree un lien pour naviguer a travers une liste. pi_linkTP_keepPlvars() est 
utilise puisque les parametres courants doivent etre maintenus. Le parametre pointer est passe 
et remplace done la valeur existante, si die existe, dans $this->piVars[]. 
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SbrowseNext = $this->pi_linkTP_keepPIvars ( 

$this->pi_getLL ( ' pi_list_browseresults_next ' , 'Next >' , TRUE ) , 
array ( 'pointer ' =>$pointer+l) ) ; 

L'utilisation des methodes de liens via piVars et tslib_pibase demande une certaine discipline. 
Mais une fois que vous vous y etes habitue, vous apprendrez a apprecier la limpidite de ce 
concept. De plus, il est imperatif d'utiliser ce cadre de developpement si vous voulez que votre 
plugin soit conforme a I'API. Dans le cas contraire, il y aura des conflits avec d'autres ap- 
plications. Son utilite principale est sa compatibility avec I'option simulateStaticDocuments, 
I'extension SpeakingURIs et d'autres solutions similaires. Enfin, comme il est decrit plus bas, 
vous avez la possibilite de mettre en cache des plugins. 

7.5.8 USER, USERJNT, cache et parametres 

Le frontend utilise une memoire tampon (cache), pour les pages deja restituees. Une fois sau- 
vegardees dans le cache, les pages ne doivent plus etre reconstitutes, el les peuvent etre servies 
directement. TYP03 dispose d'une large gamme d'options pour parametrer le cache. 

Tout d'abord, le comportement du cache est defini grace aux parametres suivants dans la 
configuration TS : 

config.no_cache = 1 

Desactive le cache 
config.cache_period = 3600 

Determine la periode (en secondes) apres laquelle une entree du cache expire 
config.cache_clearAtMidnight = 1 

Vide le cache a minuit 

De plus, vous pouvez specifier individuellement, dans I'enregistrement de la page, si cette 
derniere doit etre cachee ou non (Sans cache). Vous pouvez aussi definir la duree de validite 
du cache, qui determine la frequence a laquelle la page doit etre completement reconstruite 
(menu Expiration du cache, correspondant a cache_period). 

Le comportement du cache peut aussi etre controle par du code PHP a partir des plugins. Si 
votre plugin est integre en tant qu'objet USER, qui est normalement cache, vous pouvez forcer 
la page a etre reconstruite toutes les 1 5 minutes en specifiant : 

$GLOBALS [ ' TSFE ' ] ->set_cache_timeout_def aul t ( 60 *15 ) ; 

Vous pouvez aussi empecher la page d'etre cachee durant le processus de restitution en acti- 
vant le script suivant : 

$GLOBALS [ 'TSFE' ] ->set_no_cache ( ) ; 

Mais cette methode pour eviter d'enregistrer la page dans le cache est rarement necessaire, 
ou n'a tout simplement pas de sens. Ce qui est beaucoup plus frequent, c'est que le plugin 
doive reagir a la soumission d'un formulaire. Un objet USER n'en est pas capable, puisqu'il 
n'est meme pas consulte si la page est cachee. Une solution a ce probleme est d'activer le 
parametre no_cache=1, pour que le frontend ne fasse plus appel au cache pour cette page, 
mais la reconstruise completement. Dans les formulaires, vous pouvez simplement inclure ce 
parametre en tant que champ cache. 
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<input type= "hidden" name= "no_cache " value="l"> 



Le cache n'est pas toujours possible ou n'a pas de sens, par exemple pour un pi ug in qui doit 
prendre en compte des donnees passees en arguments ou a des parametres. Pour cette raison, 
les plugins peuvent etre integres dans le cache de la page en tant qu'objets sans cache, a I'aide 
de USERJNT. L'avantage dans ce cas est la rapidite, puisque seules les parties dynamiques de 
la page doivent etre restituees. 

TYP03 offre encore d'autres possibility pour cacher le resultat des plugins via des parametres. 
Mais cette fonctionnalite doit etre prise en compte durant la programmation et doit etre bien 
pensee, puisqu'une page separee est cachee pour chaque combinaison des parametres. 

Supposons que nous avons un plugin qui affiche la liste des donnees d'une table mise a jour 
a quelques jours d'intervalle seulement. C'est done un bon candidat pour le cache. Les en- 
registrements affiches sont selectionnes par trois variables, chacun comportant 2 etats. Par 
consequent, il y a (2 3 ) listes. De plus, le tri peut etre active sur quatre colonnes, ce qui donne 
un total de 128 (2 7 ) vues diffe rentes. 

La liste a une longueur moyenne de 100 lignes, divisees en pages de 20 lignes. Cela signifie 
qu'il y a 640 (128 (128x5) 5) variations de pages possibles dans le cache. 

Si nous ajoutons deux parametres supplementaires, le premier avec cinq options et le second 
avec huit, nous arrivons a 25 600 variations possibles, qui ne seront vraisemblablement pas 
toutes appelees ou creees. 

Comme vous le voyez, un plugin genere facilement des millions de pages cachees, ce qui charge 
lourdement le serveur de base de donnees. II est difficile de faire une recommandation ici. Une 
application consommatrice de ressources, avec seulement quelques options, peut tirer parti du 
cache, tandis qu'un plugin qui affiche des donnees courantes n'est pas cache, bien sur. 

Voici un exemple de plugin pour demontrer les possibility du cache. Le plugin genere I'affi- 
chage suivant : 



Options: 

F optl 
F opt2 
T opt3 



Figure 7.30: 
Affichage par le 
plugin linkexample 



Rendering time: lR:r)7:3"S 

Link with Parameter 

Link wilt. ParameLei upL3=l 



P Utl/TOSI vore 
r U.et 



r LodV.ri.bles 
r Glob* VarnMet 



F I »t (excerpt) 

V Cnwonmert 
r Debug into 



GET Variables: 

Array (3) OCT Variables 
StrrwC) id 28 
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Le plugin comprend un formulaire avec trois options; il donne I'heure lorsque la restitution 
est terminee, et deux liens. Pour finir, le plugin ec_feinfo est integre pour que les parametres 
passes soient affiches. 

La page vient d'etre appelee via le lien « Link with Parameter*. En dessous de « GET Va- 
riables », vous voyez les parametres qui ont ete transferes via le lien : 

http : / / www. example . org/index.php?id-28&tx_linkexample_pil [optl] =l&tx_linkexample_p 
il [opt2 ] =l&cHash=4901bb2eda 

Vous retrouvez d'abord ND de la page, ensuite les deux parametres optl et opt2 pour le plu- 
gin, qui ont ete automatiquement ajoutes via tslib_pibase, et qui sont a present disponibles 
dans $this->piVars[]. C'est dans le dernier parametre cHash que reside le secret du cache des 
plugins avec parametres. 

Une entree dans le cache est basee principalement sur I'lD de la page et le parametre type. 
Si cHash est active, les parametres transferes sont inclus et on verifie si la valeur de cHash 
correspond aux parametres courants. 

De cette maniere, on evite que la page fasse deliberement I'objet d'une serie d'appels avec des 
valeurs de hachage falsifies. 7 

Retournons a present a I'exemple de plugin. Le plugin est enregistre dans le fichier extjocal- 
conf.php de I'extension. 

t31ib_extMgm: :addPItoST43 ($_EXTKEY, 

'pil/class . tx_linkexample_pil .php' , 

'_pil', 

' list_type ' , 

1 /*cached*/) ; 

Le dernier parametre de t3lib_extMgm::addPltoST43() determine si le plugin doit etre integre 
en tant qu'objet USERJNT (0) ou USER (1). Puisque les objets USER_INT ne sont normale- 
ment pas caches, la valeur du parametre doit etre fixee ici a 1. Cette configuration n'est pas 
suffisante pour que la page soit cachee. II faut encore specifier le parametre cHash qui est 
genere par la fonction de lien de la classe tslib_pibase (en definitive, par la methode cObj- 
>typoLink()). Si, par exemple, le parametre $cache est fixe a TRUE lors de I'appel a la methode 
pi_linkTP_keepPlvars(), le parametre cHash est ajoute a I'URL 

function pi_linkTP_keepPIvars ($str, 

$overrulePIvars=array ( ) , 
$cache=0 , 
$clearAnyway-0 , 
$altPageId=0) 

Vous devez done decider au sein du plugin si la page doit etre cachee ou non, en fonction 
des parametres, et ajuster la variable $cache en consequence. Si vous voulez cacher tout ce 
qui est genere par le plugin, vous devez toujours selectionner TRUE pour la valeur de $cache. 

7 La fonction de creation de valeurs de hachage se sert du parametre $TYP03_CONF_VARS['SYS'] 
['encryptionKey']. Ce dernier ne devrait pas etre vide pour des raisons de securite (voir la section sur I'outil d'ins- 
tallation). 
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Mais n'oubliez pas que cela peut surcharger la base de donnees, selon le nombre de parametres 
concernes. 

Le tableau pi_autoCaeheFields[] de la elasse tslib_pibase permet d'activer par defaut le cache 
pour certains parametres. Cette fonctionnalite est utilisee ci-apres dans I'exemple de plugin. 
Nous nous limitons a montrer la methode main() en laissant de cote I'en-tete et le pied de 
page du fichier du plugin. 

function main { $content , $conf ) { 

$this->conf-$conf ; 
$this->pi_setPiVarDefaults ( ) ; 

// If set caching is disabled 
$ thi s - >pi_USER_INT_ob j = 0 ; 

La valeur de la variable pi_USER_INT_obj doit etre fixee a FALSE pour activer le cache dans 
tslib_pibase et generer la valeur de cHash. 

// enable auto caching 
$this->pi_autoCacheEn = 1; 

// register parameter for auto caching 
$this->pi_autoCacheFields = array! 

'optl' => array ('list' => array ( 0 , 1 )) , 
'opt2' => array ('list' => array(O.l)), 

) ; 

La fonction auto-cache est activee. Le tableau pi_autoCacheFields[] reprend les parametres 
pour lesquels le cache est permis. Si tous les parametres utilises pour creer une URL sont 
disponibles dans ce tableau (optl ,opt2), et si leur valeur est definie, la valeur de cHash est 
generee. Sinon, le parametre no_cache=1 est rajoute pour que les pages soient completement 
reconstruites, et pour que le plugin puisse prendre en compte les parametres. 

Les valeurs possibles sont definies par les tableaux list ou range. Mors que list contient une 
serie de valeurs, range est defini par une borne inferieure et une borne superieure. 

$params = array ( ' optl ' , ' opt2 ' , ' opt3 ' ) ; 

// build options form 
$options = ' ' ; 
foreach ( $params as $opt) { 

$options.= '<input type= " checkbox" '. 

' name= " ' . $this->pref ixld. ' [ ' . $opt . ' ] " ' . 
' value= " 1 " 

( $this->piVars [$opt] ?' checked= "checked" ' : ' ') . 
' > ' . $opt . ' <br /> ' ; 

} 

$content = ' 

<h3>Options : </h3> 
<form action-" ' . 

htmlspecialchars ( $this->pi_getPageLink ( $GLOBALS [ ' TSFE ' ] ->id) ) . 
'" method="post"> 
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' . $options . ' 

<input type= "hidden" name= "no_cache " value="l"> 

<input type= " submit " name=" ' . $this->pref ixld. '_submit_button" 

valuer " Submit " > 

< / f orm> 

<br /> 

L'exemple de plugin contient les trois parametres opt1, opt2 et opt3. Le code ci-dessus cree 
un formulaire qui assigne des valeurs a ces parametres. Le formulaire est envoye a la page 
courante. Le parametre no_cache est insere en tant que champ cache du formulaire. 

// show the current time - will not change with cached pages 
$content.- 'Rendering time: '. date {' H :m: s ', time {)) ; 
$content.= ' <br /xbr />'; 

L'heure est affiehee pour visualiser immediatement I'effet du cache. Si I'heure change a chaque 
chargement de la page, cela signifie que la page a ete reconstruite et qu'elle ne provient pas 
du cache. Gardez a I'esprit que le cache peut etre desactive, pour differentes raisons, si vous 
vous etes identifie dans le backend. 

// link with current piVars set by options form 
$content.- $this->pi_linkTP_keepPIvars (' Link with Parameter'); 
$content.= ' <br />'; 

Un lien est cree. II envoie les valeurs courantes de piVars comme arguments a la page courante. 
II serait possible de specifier ici la variable $cache, mais cela n'est pas necessaire, car la fonction 
auto-cache a ete activee. Si les parametres opt1 et/ou opt2 ont une valeur, un lien est cree 
avec le parametre cHash. Si le parametre opt3 est aussi present, c'est cache=1 qui est ajoute 
a I'URL, parce que opt3 ne se trouve pas dans le tableau pi_autoCacheFields[]. 

// overrule opt3-l which will force no_cache-l 
// (opt3 is not set in pi_autoCacheFields ) 
$overrule = array ('opt3' => 1 ) ; 

$content.= $this->pi_linkTP_keepPIvars (' Link with Parameter opt3=l', $overrule); 
$content.= ' <br />'; 

Dans I'appel a la methode pi_linkTP_keepPlvars(), le tableau $overrule, contenant le pa- 
rametre opt3 est passe en argument. Ce parametre est done ajoute au lien, qu'il soit ou non 
contenu dans piVars[]. Par consequent, ce lien ne cree jamais une valeur cHash. 

// insert feinfo 
$info = t31ib_div: :makelnstance ( ' tx_ccf einf o ' ) ; 
$info->init ($this) ; 

$content.= $inf o->pi_getInf oOutput ( ) ; 

return $ this->pi_wrapInBaseClass ( $content ) ; 
} 

Pour finir, tx_ccfeinfo est integre afin d'afficher les variables GET- et POST. 

Ce plugin, de par les fonctions qu'il contient, est d'une grande utilite pour effectuer des tests 
ou pour afficher des donnees. 
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7.6 Programmation frontend : exemples 

Les exemples de programmation ont ete developpes sous la version 3.7 de TYP03 et installes 
sous la version 3.8. Certaines parties du code ont ete laissees de cote pour des raisons de clarte, 
telles que les balises <?php ?> et la ligne suivante que Ton retrouve dans les fichiers comme 
ext_tables.php et extjocalconf.php : 

if (Idefined ( ' TYP03_MODE ' ) ) die ('Access denied.'); 



Mais tous ces elements sont crees par le Kickstarter, de telle sorte que les exemples peuvent 
etre reconstruits sans problemes. De plus, tous les exemples peuvent etre telecharges. 

Le prefixe user_, qui est reserve aux extensions locales, est toujours insere dans les cles d'ex- 
tension. 

Les exemples ont ete developpes sur base de I'extension CSS Styled Content, qui restitue le 
contenu uniquement au travers de classes CSS. Ce concept est aussi utilise dans les exemples 
d'extension. L'avantage est que la forme est plus facilement separee du contenu. La plupart 
des exemples sont fonctionnels sans adaptation du gabarit standard content (default) ; maisil 
est possible que I'affichage du resultat differe quelque peu. Cependant, ce n'est pas significatif 
dans le cadre du developpement d'un plugin. 



7.6.1 Bordures d'elements de contenu 

Cet exemple est une petite extension qui insere de nouvelles bordures pour les elements de 
contenu. 
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Figure 7.31: 
Element de contenu 
avec de nouvelles 
bordures 



Pour creer de nouvelles bordures, vous devez bien sur connaitre les fonctions existantes. Puis- 
que ces dernieres ne sont pas regroupees au sein d'une extension oil on peut les retrouver fa- 
cilement, vous devez faire une petite recherche. Comme vous le savez, les elements de contenu 
sont enregistres dans la table tt_content de la base de donnees, et sont ensuite restitues par la 
configuration TypoScript tt_content. II y a done plusieurs endroits ou vous pouvez commencer 
votre recherche sur les bordures. 

Le fichier typo3/sysext/cms/tbl_tt_content.php contient le tableau de definition TCA pour 
les champs de la table tt_content. Malheureusement, a premiere vue, cette definition n'in- 
dique rien qui pourrait vous aider. Comme decrit a la section 7.4.7, I'affichage des formulaires 
du backend des elements de contenu est defini dans ce fichier. Par consequent, les donnees 
pour la selection des bordures devraient aussi s'y trouver. Ces donnees, cependant, ont ete 
deplacees dans un fichier separe, qui contient les differentes langues. En examinant le fichier 
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tbl_tt_content.php, vous remarquez que les noms des champs se trouvent dans le fichier lo- 
cal la ng_ttc.p hp 8 . On retrouve rapidement les entrees pour le champ de selection. Les cles 
pour les noms des champs sont connues. 

' section_f rame ' => 'Cadre:', 

' section_f rame . I . 1 ' => 'Invisible', 

' section_f rame .1.2' => 'Regie avant ' , 

' section_f rame .1.3' => 'Regie apres ' , 

' section_f rame . I . 4 ' -> 'Indenter', 

' section_f rame . I . 5 ' => 'Identer, 33/66%', 

' section_f rame . I . 6 ' => 'Identer, 66/33%', 

' section_f rame . I . 7 ' -> 'Cadre 1', 

' section_f rame . I . 8 ' -> 'Cadre 2', 



En utilisant la cle (section_frame) dans les definitions du TCA, vous pouvez a present recher- 
cher le champ pour les bordures (c'est aussi possible via Outils — > Configuration — > $TCA). 
La section suivante se trouve dans le fichier tbl_tt_content.php : 

' section_f rame ' => Array ( 
'exclude' -> 1, 

'label' -> ' LLL : EXT : cms/locallang_ttc .php : section_f rame ' , 
'config' -> Array ( 

'type' -> 'select', 

'items' -> Array ( 
Array ( ' ' , ' 0 ' ) , 

Array ( ' LLL : EXT : cms/ local lang_ttc . php : sec tion_f rame .1.1', ' 1 ' ) , 
Array ( ' LLL : EXT : cms/ local lang_ttc . php : sec tion_f rame .1.2', ' 5 ' ) , 



section_frame dans la table tt_content definit ici les bordures pour les elements de contenu. 
A present, il faut trouver I'endroit dans la configuration TypoScript qui restitue le contenu ; a 
cet effet, utilisez le TypoScript Object Browser dans le module Web — > Gabarit. 

Des lors, vous connaissez la position dans la configuration TypoScript oil les nouvelles bordures 
doivent etre inserees. 




Recherche dans la 
configuration 
TypoScript 




-ti»*c*Mi* 

:_ I r 




La version 3.8 reprend probablement lesfichiers locallang dans un format XML : locallang_ttc.xml. 
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Pour afficher de nouvelles bordures, une nouvelle entree est done necessaire dans I'objet Ty- 
poScript : 

tt_content . stdWrap . innerWrap . cObj ect 

ainsi que dans 

$TCA [ ' tt_content ' ] [ ' columns ' ] [ ' section_f rame ' ] [ ' conf ig' ] [ ' items ' ] 

pour que les bordures soient disponibles pour I'utilisateur dans le backend. 

Malheureusement, le Kiekstarter ne prevoit pas la creation d'une extension de ce type. Vous 
pouvez copier les fichiers necessaires a partir d'une autre extension et les adapter, ou vous 
pouvez creer une extension a I'aide du Kiekstarter qui contient I'essentiel de ee dont vous avez 
besoin, et ensuite apporter les modifications en supprimant les composants superflus. 

Pour cette extension, il est recommande de creer un plugin Add as a 'Textbox' type a partir 
du Kiekstarter. Puisqu'un plugin PHP n'est pas indispensable ici, le repertoire pi 1 / peut etre 
supprime. L'extension contient alors les fichiers suivants : 

ext_emconf . php 
ext_icon . gif 
ext_localconf . php 
ext_tables . php 
locallang_db . php 

L'extension des definitions du TCA s'opere dans le fichier ext_tables.php et ressemble a ceci : 

// add new frames to select box 
t31ib_div: :loadTCA( 'tt_content' ) ; 

for ($key = 75; $key <= 77; $key++) { 

$TCA [ ' tt_content ' ] [ ' columns ' ] [ ' section_f rame ' ] [ ' conf ig' ] [ ' items ' ] [ ] = 
Array ( ' LLL : EXT : ' . $_EXTKEY . 

' /locallang_db.php : tt_content . section_f rames_' .$key, $key) ; 

} 

La definition TCA doit d'abord etre chargee a partir de la table tt_content par la fonction 
t3lib_div::loadTCA(), afin d'etre etendue en utilisant une boucle for(). Cette facon de proceder 
n'est pas indispensable, mais rend le code plus facilement reutilisable, puisqueseuleslesvaleurs 
de cle de depart (75) et de fin (77) doivent etre adaptees. 

La definition correspondante des noms de champs se trouve dans locallang_db.php. 

$ LOC AL_L ANG = Array ( 

'default' => Array ( 

' tt_content . section_f rames_75 ' 
' tt_content . section_f rames_76 ' 
' tt_content . section_f rames_77 ' 

) , 

'de' => Array ( 

' tt_content . section_f rames_75 ' 
' tt_content . section_f rames_76 ' 
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=> 'Frame: orange/dotted' , 
=> 'Frame: orange/dashed', 
=> ' Frame : orange/solid' , 

=> 'Rahmen: Orange/gepunktet ' , 
=> 'Rahmen: Orange/gestrichelt ' , 
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' tt_content . section_f rames_77 ' => 'Rahmen: Orange/durchgezogen ' , 

) , 

'fr' => Array ( 



' tt_content . section_f rames_7B ' => 'Cadre: Orange/point', 
' tt_content . section_f rames_76 ' => 'Cadre: Orange/ tiret ' , 
' tt_content . section_f rames_77 ' => 'Cadre: Orange/ ligne ' , 



) , 



) ; 



Une enveloppe est necessaire pour creer la bordure. Border 1 peut servir iei de modele : 

tt_content . stdWrap. innerWrap. cObject . 20 = TEXT 

tt_content . stdWrap . innerWrap . cObject . 20 .value = <div class= " csc-f rame cs 
c-frame-framel"> | </div> 

Le code TypoSeript est insere dans ext_localeonf.php. On recourt aussi ici a une bouele for 
pour generer le TypoSeript necessaire via t3lib_extMgm::addTypoScript(). 

// generate frames with key 75 - 77 
for ($key = 75; $key <= 77; $key++) { 
t31ib_extMgm: : addTypoScript ( $_EXTKEY, 'setup' , ' 
tt_content . stdWrap . innerWrap . cObject .'. $key. ' = TEXT 
tt_content . stdWrap . innerWrap . cObject . ' .$key. 

'.value = <div class= " csc-f rame-f rame '. $key .'"> | </div> 



Ce qui manque encore, c'est un peu de CSS pour rendre les bordures visibles. On pourrait 
I'inclure dans la feuille de style du site Web. Mais vous pouvez aussi I'inserer si necessaire via 
le gabarit de I'extension. Pour ce faire, creez un nouveau fichier : 



Ce fichier doit contenir du code qui ressemble a ceci (en abrege) : 

# Example of default set CSS styles (these go into the document header) : 
plugin . tx_user frames . _CSS_DEFAULT_STYLE ( 
DIV. csc-f rame-f rame75 { 

background-color: #F7AAC27; border: 3px dotted #000; } 
DIV. csc-f rame-f rame76 { 

background-color: #F7AAC27; border: 3px dashed #000; } 
DIV. csc-f rame-f rame77 { 

background-color: #F7AAC27; border: 3px solid #000; } 

) 

L'extension est a present terminee et peut etre installee par le gestionnaire d'extensions. Pour 
afficher les bordures, le CSS fourni peut etre integre en ajoutant le gabarit statique a I'enre- 
gistrement de gabarit. 



43) ; 



} 



static/ 



setup. txt 



Figure 7.33: 
Ajout du gabarit 
statique 




G) Include static (from extensions; 



Selectionne(s): 

less Styled Content (css_styled_content) 
Frames 75-77: CSS (userjrames) 
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Un des desavantages de ce precede est que le code CSS est insere dans I'en-tete de la page 
HTML, ce qui rend celle-ci plus lourde. D'un autre cote, on peut agir de la sorte deliberement, 
pour associer le code CSS a une page en particulier, evitant ainsi le chargement d'une feuille 
de style externe. 

La figure 7.34 suivante vous presente le resultat de cette petite extension. 



'•■'"<>"■■•'"' ..................... Fiqure 7 34' 

t crok que les roves sont faits pour etre realises. C'est le problems <fes roves. Les roves sont faits pour '■ y ■ - 



: : Trois nouveaux types 

_■ ... _ ^ bordure dans le 

Wagner sa we ne vautpas le coup puisqtfon fa deja. - Coluche 

~ -j frontend 



Le code genere a I'allure suivante : 

<style type- " text /ess " > 
/*<! [CDATA [ * / 

<! — 

/* default styles for extension " tx_userf rames " */ 
DIV. csc-f rame-f rame75 { 

background-color: #FAAC27; border: 3px dotted #000; } 
DIV.csc-frame-frame76 { 

background-color: #FAAC27; border: 3px dashed #000; } 
DIV. csc-f rame-f rame77 { 

background-color: #FAAC27; border: 3px solid #000; } 

--> 

/*]]>*/ 
</style> 

</head> 
<body> 



<! — CONTENT ELEMENT, uid:15/text [begin] --> 

<a name- " 15 "x/axdiv class- " csc-f rame-f rame7 5 " > 
<!-- Text: [begin] --> 

<p class="bodytext">On croit que les reves ...</p> 
<!-- Text: [end] --> 
</div> 

<!-- CONTENT ELEMENT, uid:15/text [end] --> 



7.6.2 La balise Typo de compte a rebours (TypoTag) 

Bien qu'un CMS doive separer la forme du contenu, il est souvent necessaire de marquer 
le contenu au prealable. TYP03 fournit ses propres balises pour ce marquage. II ne faut pas 
confondre ces dernieresavec les balises HTML, car les balises Typo sont transformees en balises 
HTML (ou un autre format) durant le processus de restitution. 

L'exemple suivant introduit la balise <countdown>. Son but est de deeompter lesjours jusqu'a 
une certaine date. L'elementText contenant : 

II reste <countdown>2 9 Jan 2006</countdown> jours avant le TYP03 Snowboard Tour 
2006. 
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doit donner le resultat suivant : 

II reste 103 jours avant le TYP03 Snowboard Tour 2006. 

La date contenue dans la balise doit done etre convertie en nombre de jours restant avant 
cette date. 

Une nouvelle balise offrant cette fonetionnalite peut facilement etre creee dans le Kickstarter. 
Le Kickstarter fournit les fichiers suivants : 

ext_emcon£ .php 
ext_icon . gif 
ext_localconf . php 
pil/ 

class .user_tagcountdown_pil .php 



Figure 7.35: 
Balise <eountdown> 
ereee en tant que 
plugin dans le 
Kickstarter 
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Dans le fichier extjocalconf.php, le script PHP class.user_tagcountdown_pi1.php et le plug- 
in sont integres dans le gabarit TypoScript. 

t31ib_extMgm: :addPItoST43 ($_EXTKEY, 

' pil /class . user_tagcountdown_pil .php ' , 
'_pil', 

1) ; 

t31ib_extMgm: : addTypoScript ( $_EXTKEY, 'setup' , ' 

lib. parseFunc_RTE . tags . countdown = < plugin.'. 

t31ib_extMgm: : getCN ( $_EXTKEY) . 

'_pil 
',43) ; 
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Remarquez ici que cela ne fonctionne pas avec le gabarit content (default), ear parseFunc se 
trouve a un autre endroit. Si le plugin doit operer avec ce gabarit, il doit etre integre d'une 
autre facon. Generalement, le TypoScript Object Browser dans le module Web — ► Gabarit 
nous donne de I'information a ce propos. 

t31ib_extMgm: : addTypoScript ( $_EXTKEY, 'setup' , ' 

tt_content . text . 20 .parseFunc . tags . countdown = < plugin.'. 

t31ib_extMgm: : getCN ( $_EXTKEY) . 

'_pil 
' ,43) ; 

Mais revenons a la premiere situation. Voici le resultat, en resume de Integration du Typo- 
Script : 

plugin. user_tagcountdown_pil = USER 

plugin. user_tagcountdown_pil .userFunc = user_tagcountdown_pil->main 

includeLibs . user_tagcountdown_pil = typo3conf /ext/user_tag_countdown/pil 
/class .user_tagcountdown_pil .php 

lib. parseFunc_RTE. tags . countdown = < plugin. user_tagcountdown_pil 

Vous pouvez aussi specifier ceci directement en tant que gabarit TypoScript dans le fichier 
ext_setup.txt. Mais la meilleure facon de proceder, qui est aussi la plus portable, est d'integrer 
le plugin via t3lib_extMgm, puisque aucun chemin de fichiers statiques n'est utilise. 

Le script final class.user_tagcountdown_pi1.php se presente alors comme suit : 

require_once (PATH_tslib. ' class . tslib_pibase .php ' ) ; 

class user tagcountdown pil extends tslib pibase { 
var $prefixld = 'user tagcountdown pil'; 

var $scriptRelPath = 'pil/class . user_tagcountdown_pil .php' ; 
var $extKey = ' user_tag_countdown ' ; 



I * * 

* processes the <countdown> tag 
*/ 

function main ( $content , $conf) { 

$date = $this->cObj ->getCurrentVal ( ) ; 
$timestamp = strtotime ( $date) ; 
$delta = $timestamp - time ( ) ; 

$days = intval ($delta / (60 * 60 * 24)) + 1; 



return $days ; 

} 

} 

La fonction $this->cObj->getCurrentVal() renvoie le contenu de la balise <countdown> (la 
date), qui est convertie en jours dans les lignes suivantes. Remarquez que la fonction strto- 
time() ne peut pas manipuler les conventions internationales, mais cela n'a pas d'importance 
dans cet exemple. 

Les parametres sont passes a la fonction main() de deux manieres. Pour la premiere, le passage 
se fait directement dans la balise Typo, comme pour les balises HTML. 
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II reste <countdown unit=hour>29 Jan 2 006</countdown> heures avant le TYP03 
Snowboard Tour 2006. 

Tous les parametres dans la balise sont accessibles par I'objet plugin via le tableau $this->cObj 
->parameters. Dans ce cas, $this->cObj->parameters['unit'] contient I'heure. On peut aussi 
travailler de la sorte avec plusieurs parametres. De plus, $this->cObj->parameters['allParams'] 
contient tous les parametres sous forme de chaines de earacteres, dans le format dans lequel 
ils sont passes. Pour afficher les heures, on doit apporter les modifications suivantes dans le 
plugin : 

function main ( $content , $conf ) { 

// get parameter from tag 
$unit = $this->cObj ->parameters [ ' unit ' ] ; 

// get parameter from TypoScript 
$unit = $unit ? $unit : $this->cObj ->stdWrap ( $conf [ ' unit ' ] , $conf [ ' unit . ' ] ) ; 

if { $unit== 'min ' ) { 

$divider = 60; 
} elseif { $unit== 'hour ' ) { 

$divider = 60 * 60; 
} else { 

// day - default 
$divider = 60 * 60 * 24; 

} 

$date = $this->cObj ->getCurrentVal ( ) ; 
$timestamp = strtotime ( $date) ; 
$delta = $timestamp - time() ; 
$days = intval ( $delta / $divider) + 1; 

return $days; 

} 

A present, la balise <countdown> peut gerer des minutes, des heures et des jours. 

La deuxieme maniere de passer les parametres, comme pour tout plugin, est de recourir au 
TypoScript. Le code qui recupere le parametre unit est deja present dans le code ci-dessus : 

$unit = $unit ? $unit : $this->cObj ->stdWrap ( $conf [ ' unit ' ] , $conf [ ' unit . ' ] ) ; 

Si unit n'a pas ete passe en parametre dans la balise, la fonction stdWrapfJ est appelee pour 
recuperer la valeur via la configuration TypoScript. stdWrapO est un composant de I'objet de 
contenu cObj. L'objet cObj est instancie de maniere externe lorsque le plugin est initialise, et 
reste a la disposition du plugin. cObj, une instance de tslib/class.tslib_content.php, restitue 
tous les objets connus de TypoScript tels que TEXT ou IMAGE. 

plugin .user tagcountdown pil.unit = min 

Cette configuration TypoScript specifie que la valeur de unit est min. La valeur par defaut 
n'est done plus day. Done, les minutes sont decomptees, aussi longtemps qu'une autre valeur 
de unit n'est pas specifiee dans la balise <countdown>. 

Puisque plugin. user_tagcountdown_pi1. unit est un objet de type stdWrap, il herite des 
memes proprietes. La configuration TypoScript suivante est des lors possible : 
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plugin.user_tagcountdown_pil .unit = min 

plugin. us er_tagcountdown_pil .unit . override . data = register: user_tagcountdown_unit 

lei, unit recoit la valeur min, mais si user_tagcountdown_unit contient deja une valeur, alors 
cette derniere est remplaeee par le registre TS. TYP03 lit le TypoScript dans un tableau PHP. 
Vous pouvez afficher ee tableau en inserant la fonction debug($conf); au debut. Si vous re- 
chargez maintenant la page dans le frontend, vous obtiendrez le resultat presente a la figure 
7.36. 



useiFunc 


user_tagcountdown_pil->main 


unit 


min 


unit. 


override. 


data register: user_tagcountdown_unit| 



Figure 7.36: 
Affichage par la 
fonction debug!) 



Le TypoScript complet pour le plugin est affiche. Les tables reproduisent I'imbrication des ta- 
bleaux. Sous forme de texte, voici ee que cela donne : 

plugin. user_tagcountdown_pil = USER 
plugin. user_tagcountdown_pil { 

userFunc = user_tagcountdown_pil->main 

unit - min 

unit .override .data = register: user_tagcountdown_unit 

} 

Si stdWrapO est appele, le premier argument de la fonction est la valeur de $conf['unit'], dans 
ce cas, min. 

$this->cObj ->stdWrap ( $conf [ 'unit ' ] , $conf [ ' unit . ' ] ) ; 

Le premier argument de stdWrapO est la valeur ou le contenu que la fonction est censee 
traiter. Le second argument $conf['unit.'] definit le comportement de stdWrapO au moyen 
de parametres contenus dans un tableau. Vous devriez etudier la fonction stdWrapO dans 
tslib/class.tslib_content.php et essayer de comprendre son fonctionnement. Vous retrouverez 
ce concept encore et toujours dans TYP03. Et si vous reexaminez le code PHP de ce plugin, 
vous realiserez que meme la fonction main() utilise ce concept. 

7.6.3 Balise de compte a rebours en JavaScript 

La balise de compte a rebours sera ici etendue pour que le compteur dans le frontend continue 
a decompter via JavaScript. Pour que cela ait du sens, nous devons ici etendre le plugin pour 
qu'il affiche les secondes. De plus, le parametre animate est introduit. 

II reste <countdown unit=sec animate>29 Jan 2006</countdown> secondes avant le 
TYP03 Snowboard Tour 2 0 0 6. 

Le code JavaScript est integre dans la page uniquement au cas oil le compte a rebours doit 
etre affiche. Meme si cela sort du cadre strict de ce livre, nous examinons ici brievement la 



461 



7 Developpement d'extensions 



programmation JavaScript. Afin de differencier le code JavaScript inclus par plusieurs exten- 
sions dans le code HTML des pages, le JavaScript doit tenir compte de I'espace de nommage 
des extensions. Le moyen le plus simple est d'encapsuler I'entierete du script dans un objet, ce 
qui evite de recourir a des variables globales. 

Les objets JavaScript jouent le meme role que les classes en PHP. Line fonction sert ici de 
conteneurqui peutetre etendu par la propriete prototype. 

function myClass ( ) { 

this .mylnstanceVar = 0; 

} 

myClass .prototype . myFirstMethod = function {paraml, param2 ) { 
this .mylnstanceVar = (paraml + param2)/2; 

} 

myClass .prototype .mySecondMethod = function () { 
return this .mylnstanceVar ; 

} 

De cette faeon, seule la fonction myClass() est presente dans I'espace de nommage global. 
Toutes les autres fonctions et variables sont encapsulees. Pour ce faire, notre choix se porte 
naturellementsur $this->extKey ou $this->prefixld comme espace de nommage pour le code 
JavaScript. Voici done la structure du JavaScript pour I'extension : 

function user_tagcountdown_pil ( id, countdown, unit ) { 
} 

user_tagcountdown_pil . prototype . showcount = function () { 

} 

Le tableau additionalHeaderData de I'objet global TSFE est a votre disposition pour inserer 
du code dans I'en-tete HTML. L'exemple suivant vous fournit un exemple d'integration du 
JavaScript dans I'en-tete. 

// check if JavaScript is already set 
if ( ! $GLOBALS [ ' TSFE ' ] ->addi tionalHeaderData [ $this->pref ixld] ) { 

$jsCode = ' 

alert ("This is JavaScript");'; 

// wrap JavaScript in script tags and add to page header 
$GLOBALS[ 'TSFE' ] ->additionalHeaderData [ $this->pref ixld] = 

t31ib_div: :wrapJS ($jsCode) ; 

} 

On verifie d'abord si du code JavaScript a deja ete insere. En effet, ce code doit apparaitre une 
seule fois, quel que soit le nombre d'appels a ce plugin. Grace a la fonction t3lib_div::wrapJS(), 
le code JavaScript est entoure par les balises <script> avant d'etre ajoute dans I'en-tete HTML. 
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Si vous voulez utiliser le traitement d'evenement JavaScript onload dans la balise body, vous 
devez bien sur tenir compte des autres extensions. A cette fin, entrez le code JavaScript onload 
dans un tableau de I'objet TSFE. 

$GLOBALS [ ' TSFE ' ] ->JSeventFuncCalls [ ' onload' ] [ $this->pref ixld] = 

'alert ("JS executed on load");'; 

Dans le code modifie du plugin, un compteur est d'abord introduit pour donner un identifiant 
unique (ID) aux elements. On utilise pour ce faire une variable globale : 

function main ( $content , $conf ) { 

// count items for JavaScript usage 
$GLOBALS [ ' T3_VAR ' ] [ ' ext ' ] [$this->pref ixld] [' count ']++, • 

Grace a $GL0BALS[T3_VAR']['ext'][$this->prefixld],seul I'espace de nommagedu plugin est 
utilise. 

// get parameter from tag 
$unit = $this->cObj ->parameters [ 'unit ' ] ; 

// get parameter from TypoScript 
$unit = $unit ? $unit : $this->cObj ->stdWrap ( $conf [ ' unit ' ] , 

$conf [ ' unit . ' ] ) ; 

Les secondes sont alors ajoutees dans le deeompte : 

if ( $unit== ' sec ' ) { 

$divider = 1 ; 
} elseif ($unit— 'min' ) { 

$days = intval ($delta / $divider) + 1; 

Le nouveau parametre animate est insere. Notez que la fonction isset() verifie que animate est 
bien present, car vous devez le specifier dans la balise comme suit : <countdown animate=1 
...>. 

// check if "animate" parameter is set in tag 
$animate = isset ( $this->cObj ->parameters [' animate ']) ,- 

// get parameter from TypoScript 
$animate = $animate ? $animate : 

$this->cObj ->stdWrap ( $conf [ ' animate ' ] , $conf [ ' animate . ' ] ) ; 

Pour finir, voici le code qui integre I'animation. Celle-ci tient compte des secondes ou des 
minutes, puisque personne ne noterait de changement sur les heures ou les jours. 

//do animation for seconds or minutes only 
if ($animate AND ( $unit— ' sec ' OR $unit— 'min' ) ) { 

Un ID pour I'element HTML est cree : 

// unique id for every element (HTML DOM doesn't accept '_' ) 
$domId = str_replace ('_','-', $this->pref ixld) .'-' . 

$GLOBALS [$this->pref ixld] ['count'] ; 
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On appelle la fonction, qui est presentee plus tard, pour ereer le code JavaScript. 

// include JS code 
$this->addJsCounter ( $domId, $days, $unit) ; 

Pour finir, le texte est entoure par les balises <span> incluant un ID. 

// add an id to the content 
$days = '<span id= " ' . $domId. ' " > ' . $days . ' </span> ' ; 

} 

return $days; 

} 

Vient a present la fonction qui insere le code JavaScript. Les endroits contenant du JavaScript 
sont en gras dans le texte. Notez que le code PHP comprend des variables telles que { $th is 
->prefixld} qui rendent le code portable. 

/ * * 

* Add JavaScript counter code to the page 

* @param string dom id 

* @param integer start value for the counter 

* @param string unit: 'sec' or 'min' 

* ^return void 

*/ 

function addJsCounter ( $id, $countdown, $unit) { 
// include JS code once 
if ( ! $GLOBALS [ ' TSFE ' ] ->additionalHeaderData [ $this->pref ixld] ) { 

$jsCode = <<<EOD 
{$this->pref ixId}objArr = new ArrayO; 

function {$this->pref ixld} (id, countdown, unit) { 
this. id = id; 

this . countdown = countdown; 
setlnterval ( 

"{$this->pref ixId}objArr [ ' "+id+" ' ] . showcount ( ) " , 
unit) ; 

} 

{$this->pref ixld} .prototype . showcount = function () { 
this . countdown = this. countdown- 1; 
element = document .getElementById(this . id) ; 
element . innerHTML = this. countdown; 

} 



EOD ; 



// wrap JavaScript in script tags and add to page header 
$GLOBALS [ ' TSFE ' ] ->additionalHeaderData [ $this->pref ixld] = 

t31ib_div: :wrapJS ($jsCode) 

} 

$unit = ($unit=="min") ? 60000 : 1000; 

// add JS onload handler 
$GLOBALS [ 'TSFE' ] ->JSeventFuncCalls [ 'onload' ] [$id] = 
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»{$this->prefixId}objArr['{$id}'] = 
new {$this->pref ixld} ( '{$id} ' , { $countdown} , ' {$unit} ' ) ; " ; 

} 

Puisque les principes ont deja ete exposes, nous ne reviendrons pas en detail sur le code de 
I'exemple. 

Comme vous le constatez, il n'est pas si difficile d'integrer du JavaScript pour que plusieurs 
plugins soient actifs sur la meme page, sans entrer en conflit les uns avec les autres. 

7.6.4 Integration de scripts PHP externes 

Au plus les scripts sont simples et bien structures, au plus il sera facile de les integrer dans Reference 680352 

TYP03. Si les scripts sont deja organises en classes, I'ecriture d'un « wrapper » 9 semble la 

solution la plus evidente a mettre en place. Ce dernier integre la classe et I'appelle a bon 

escient. Plus de travail est necessaire si des parametres sont transferes. En regie generale, I'URL 

et, si necessaire, les parametres eux-memes doivent etre adaptes. Si le script est peu structure 

ou si c'est un script ancien qui utilise des variables PHP maintenant obsoletes, des adaptations 

doivent etre apportees. 

Des scripts PHP externes peuvent etre integres de differentes facons dans le frontend, via les 
objets TypoScript suivants : 

USER, USERJNT 

Ces objets representent la methode standard. Tous les plugins crees par le Kickstar- 
ter sont integres en tant qu'objets USER ou USERJNT. La difference entre les deux 
methodes repose sur le fait que le resultat est cache lors de Integration par USER, 
alors que ce n'est pas le cas avec USERJNT. Cette derniere methode est utilisee si le 
script doit tenir compte des parametres (GET, POST) lors de I'affichage du resultat, et 
lorsque cela ne vaut pas la peine de recourir a la fonctionnalite cHash. ['integration par 
PHPJSCRIPT est conseillee uniquement si un script n'est pas encapsule dans une classe, 
et si le portage n'est pas envisageable. 

PHP_SCRIPT 

['integration d'un script ressemble a ceci dans TypoScript : 

page. 90 = PHP_SCRIPT 

page . 90 . file fileadmin/ scripts /myscript .php 

Le script est inclus dans tslib_cObj, ce qui signifie que vous avez acces a toutes les 
methodes de cet objet via $th is. Le resultat du script doit etre contenu dans la variable 
$content. 

PHPJ5CRIPTJNT 

Cette methode se comporte de la meme maniere que PHPJSCRIPT, a ceci pres que le 
resultat du script n'est pas cache. 
PHP_SCRIPT EXT 

Avec cette methode, le resultat n'est pas cache. Mais I'integration est differente puisque 
le resultat peut etre affiche par les commandes echo/print. 

9 NdT : litteralement, programme enveloppant 



465 



7 Developpement d'extensions 



Convertir un script PHP 

Si vous voulez integrer des scripts dansTYP03, alors qu'ils n'ont pas ete developpes dans ce but, 
c'est generalement possible sans trop d'efforts. Nous illustrons ci-apres les differentes possi- 
bilites existantes, sur base d'un petit script qui extrait quelques informations sur un serveur 
Web. 

Figure 7.37: £ xa m j n e S erver 

Affiehage par le script 

"Examine server" Enter a domain name to examine their server; |typo3.com 



typo3.com is running: 

Server: Apache/1.3.28 (Unix) PHP/4.2.2 
X-Powered-By: PHP/4.2.2 



Voici la version originale du script : 

<?php 

# based on a script from http://px.sklar.com by Matt DeLong 

// examine server information with GET request 
function examine ( $domain) { 
$result = 

if ( $domain) { 

if($fp = @f sockopen ( $domain, 80, &$errno, &$errstr, 30) ){ 
fputs($fp, "GET / HTTP/1 . 0\r\n\r\n" ) ; 
$data = array ( ) ; 
while ( ! feof ($fp) ) { 

$data[] = fgets($fp, 128); 

} 

fclose ($fp) ; 

} 

for($x=0; $x<7; $x++) { 

$result = (strstr (strtolower ($data [$x] ) , 'server:')) ? 

$data[$x] : $result; 

} 

$result.= (strstr ($data[3] , ' X-Powered-By ' ) ) ? 

'<br \>' . $data[3] : 

} 

$result = ($domain && !$result) ? 

' <b>ERROR: </b> connection could not be established with '. 

htmlspecialchars ( $domain) : $result; 
return $result; 

} 

$domain = stripslashes ( $HTTP_POST_VARS [' domain ']) ; 
?> 

<htral> 
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<body> 

<h2 >Examine Server</h2> 

<form action="<?php echo $_SERVER [ ' PHP_SELF ' ] ; ?>" method^ " POST " > 

<p>Enter a domain name to examine their server: 

<input type-"text" name- " domain" value-"<?php 

echo htmlspecialchars ( $domain) ; ?>"> 

<input type="submit" value="Go"></p> 
</form> 
<hr> 
<p> 
<?php 

$result = examine ( $domain) ; 

if($result && ! strstr ( $result , 'ERROR')) 

echo htmlspecialchars ( $domain) . ' is running : <brxbr> ' ; 
echo $result; 

?> 

</p> 

</body> 

</html> 

II est possible d'obtenir une page complete a partir de ee script. La configuration TypoScript 
suivante fait simplement appel au script ci-dessus et ne cree aucun autre resultat : 

page > 
page = PAGE 
page . typeNum = 0 

page . conf ig . disableAHHeaderCode - 1 
page. 50 = PHP_SCRIPT_EXT 

page. 50. file = fileadmin/scripts/examine-server-ext.php 

Mais si vous integrez le script, comme dans les deux dernieres lignes, dans votre propre page 
(avec votre propre configuration de page), il faut supprimer du script tout ce qui a deja ete 
genere par TYP03. Normalement, il s'agit de I'en-tete HTML et de la balise <body>. De plus, 
par opposition a PHP_SCRIPT_EXT, les commandes echo/print ne sont pas possibles pour 
PHP_SCRIPTet PHP_SCRIPT_INT. Ici, le script doit renvoyer le contenu dans la variable Scon- 
tent. On realise ceci facilement via la bufferisation de sortie de PHP. 

ob_start ( ) ; 

?> 

<h2>Examine Server</h2> 
<?php 

$content = ob_get_contents ( ) ; 
ob_end_clean ( ) ; 

?> 
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Un probleme frequent lors de Integration de scripts est le traitement des parametres et des 
URL. Aussi, ce script ne fonctionne pas, car I'URL de destination du formulaire n'est pas cor- 
recte. La version corrigee du script est affichee ci-dessous dans sa variante PH P_SCR I PT_I NT. 

<?php 

# based on a script from http://px.sklar.com by Matt DeLong 
function examine ( $domain) { 
return $result; 

} 

$domain = t31ib_div: :_GP ( 'domain' ) ; 

ob_start ( ) ; 

?> 

<h2>Examine Server</h2> 
<form action-"<?php 

echo htmlspecialchars (t31ib_div: :getIndpEnv( ' REQUEST_URI ' ) ) ; 

?>" method^ " POST" > 

<p>Enter a domain name to examine their server: 

<input type= " text " name-"domain" value-"<?php 

echo htmlspecialchars ( $domain) ; ?>"> 

<input type-"submit" value- "Go " ></p> 
</f orm> 
<hr> 
<p> 
<?php 

$result = examine ( $domain) ; 

if($result && ! s trs tr ( $resul t , 'ERROR')) 

htmlspecialchars ( $domain) . ' is running : <brxbr> ' ; 
echo $result; 

?> 

</p> 
<?php 

Scontent = ob_get_contents ( ) ; 

ob_end_clean ( ) ; 

?> 

La question qui se pose est de savoir s'il ne serait pas preferable de proceder via une extension 
et de creer un plugin. En effet, cela requiert a peine plus de travail, un meilleur cadre est etabli 
pour les futurs developpements et le script est integre correctement. De plus, I'integration via 
PHP_SCRIPT peut conduire a des instabilit.es dans TYP03 si le script manipule des variables 
globales. La transformation en plugin ressemble a ceci : 

class user_exmsv_pil extends tslib_pibase { 
var $prefixld = ' user_exmsv_pil ' ; 

var $scriptRelPath = 'pil/class . user_exmsv_pil .php' ; 
var $extKey = ' user_exm_sv ' ; 
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/ * * 

* Examine Server main function 
*/ 

function main { $content , $conf ) { 
$ this->conf-$conf ; 
$this->pi_setPiVarDef aults ( ) ; 
$this->pi_USER_INT_obj=l ; 

$domain = $this->piVars [' domain '] ; 

$result = $this->examine ( $domain) ; 

if($result && ! strstr ( $result , 'ERROR')) { 
$result = ' 
<hr> 

<p> ' . htmlspecialchars ( $domain) . ' is running:<br /> 

<br /> 

' . $result . ' </p> ' ; 

} 

$content = ' 

<h2 >Examine Server< /h2> 
<form action-" ' . 

htmlspecialchars (t31ib_div: :getIndpEnv( ' REQUEST_URI ' ) ) . 
' " method-"post"> 

<p>Enter a domain name to examine their server : 
<input type="text" name="' . $this->pref ixld . 

' [domain] " valuer" ' .htmlspecialchars ($domain) . ' "> 
<input type= "hidden" name^ "no_cache" value= " 1 " /> 
< input type- " submit " value- "Go" ></p> 
</form>' .$result; 

return $this->pi_wrapInBaseClass ( $content) ; 

} 

I * * 

* Examine server informatione with GET request 
* 

* @param string domain name 

* ^return string 
*/ 

function examine ( $domain) { 
return $result; 

} 
} 

Le principal changement consiste a utiliser les parametres systeme au travers de la classe 
tslib_pibase. Par consequent, tous les parametres qui sont passes avec $this->prefixld en 
tant qu'elements d'un tableau sont automatiquement disponibles dans $this->piVars[]. 
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$domain = $this->piVars [' domain '] ; 

<input type="text" name=" '. $this->pref ixld . ' [domain] " valuer"'. 

htmlspecialchars ( $domain) . '"> 

Pour un petit script tel que celui-ci, cela vaut la peine de le transformer en plugin. La fonc- 
tionnalite du script est suffisamment claire, ce qui le rend egalement facile a reutiliser. 

7.6.5 Portage de script PHP 

En utilisant I'exemple de I'application PHP dataMiner™, nous allons montrer comment porter 
des scripts vers TYP03. dataMiner est utilise pour afficher des tables de base de donnees sous 
forme de listes et de vues detaillees. Des enregistrements peuvent aussi etre edites individuel- 
lement. 



Figure 7.38: 
Affichage de liste par 
dataMiner 
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Le but du portage est d'integrer autant que possible dataMiner dans TYP03, tout en minimisant 
I'effort necessaire. 

Le repertoire dataMiner contient les fichiers suivants : 

dataMiner- 0.2 0.0/ 
LICENSE 
NOTES 
README 
img/ 

asc . gif 
cal . gif 
delete . gif 

index . html 
index . php 
lib/ 

dM. j s 

dataBrowser . php 
dataDBI . php 
dataDetailer . php 
dataEdi tor . php 
dataMiner . php 

10 http://green hell.com/dataMiner 



470 



7.6 Programmation frontend : exemples 



metabase/ 
sample . sql 



Le code source de dataMiner est programme de maniere tres structures Les fichiers du reper- 
toire lib/ contiennent I'application. Le code est encapsule dans des classes, ce qui devrait faci- 
liter le portage. 

L'application doit etre integree plus tard dans une page en tant que plugin. Un plugin sans 
cache de type (USERJNT) est cree dans le Kickstarter. Le repertoire dataMiner est alors copie 
vers la nouvelle extension. Les fichiers inutiles sontsupprimes, mais les fichiers LICENSE, NOTES 
et README doivent etre laisses la oil ils sont. 

Tout d'abord, le module Outils — > ExtDevEval est a votre disposition pour convertir les guille- 
mets doubles en guillemets simples (voir la section chap7 : guidelines). 

Les scripts contiennent plusieurs commandes include. Celles-ci doivent etre modifiees dans le 
formulaire pour que t3lib_extMgm::extPath() determine le chemin de I'extension. 

include_once ( ' lib/dataMiner .php' ) ; 

require_once ( t31ib_extMgm: : extPath ( ' dataminer ' ) ■ ' dataMiner/ lib/dataMiner . php ' ) ; 

Le fichier index.php dans le repertoire est un exemple parmi d'autres qui illustre la facon dont 
les classes de l'application dataMiner sont utilisees. La structure ressemble a ceci (en abrege) : 

$foo = new dataBrowser ( ) ; 

$foo->type = "mysql"; // database server type 



$foo->name = "MYDB"; // name of the database 

$foo->user = "root"; // database username 

$foo->pass = " " ; // database Passwort 

$foo->host = " localhost " ; // database server hostname 



// The browser needs a table name and it's primary key (required) 

$foo->table = " city_directory " ; // database table 

$foo->key = "Rid"; // table primary key field name 

// Assigning a table title will display the title instead of the actual 
// database table name. 
// title = "string", - 
$foo->title = "Businesses"; 



// print results (required) 
$f oo->Main ( ) ; 



Le code dans index.php est repris dans la methode main() du plugin, dans le fichier pM/tx_da- 
taminer_pi1.php. II faut toujours integrer la classe principale de dataMiner dans I'en-tete du 
fichier. 

require_once (t31ib_extMgm: : extPath ( 'dataminer' ) . ' dataMiner /lib/dataMiner . php ' ) ; 

II s'avere que I'ensemble du resultat de dataMiner est genere par la methode MainfJ. Cepen- 
dant, tout le contenu est affiche par la commande print. Cela ne correspond bien sur pas du 
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tout au concept de plugin, qui doit renvoyer le contenu via return. Heureusement, PHP pro- 
pose des fonctions de bufferisation de resultat. La portion de code suivante montre comment 
la bufferisation du resultat est initiee. Ensuite, la methode MainfJ de dataMiner est appelee. 
Le resultat issu de la commande print est bufferise par PHP. Ce buffer est ensuite lu dans les 
lignes de code suivantes et passe a la variable $content. Pour finir, le buffer est desactive et 
son contenu renvoye au systeme. 

ob_start ( ) ; 
$dm->Main ( ) ; 

$content = ob_get_contents ( ) ; 
ob_end_clean ( ) ; 

return $this->pi_wrapInBaseClass ( $content) ; 

dataMiner utilise Metabase pour se connecter a la base de donnees. Pour pouvoir tester 
le plugin, la configuration suivante doit etre faite pour la base de donnees, en utilisant les 
constantes de TYP03. 

$dm->type = 'mysql'; // database server type 

$dm->name = TYP03_db; // name of the database 

$dm->user = TYP03_db_username ; // database username 

$dm->pass = TYP03_db_Passwort ; // database Passwort 

$dm->host = TYP03_db_host ; // database server hostname 

C'est une solution parfaitement valide, bien que vous ne soyez pas oblige d'utiliser Metabase. 
Mais nous y reviendrons plus tard. 

dataMiner est concu pour fonctionner avec n'importe quel type de base de donnees, apres un 
peu de configuration. Pour les besoins de notre test, la table tt_address est selectionnee et 
configuree. 

// The browser needs a table name and it's primary key (required) 
$dm->table = ' tt_address ' ; // database table 
$dm->key = 'uid'; // table primary key field name 

A ce stade, le plugin peut etre installe et teste. La table tt_address est correctement affichee 
sous forme de listes. Cependant, les icones ne sont pas visibles, puisque les chemins ne sont 
plus valides. De plus, les liens et les formulaires ne fonctionneront plus, car les URL ne res- 
pectent pas les normes de TYP03. 

On adapte tres simplement les chemins des icones en utilisant les fonctions de remplacement 
de texte. En premier lieu, le chemin relatif a I'extension est initialise a un point central du code 
de dataMiner. 

function _var_setup() { 

$this->iconPath = t31ib_extMgm: : siteRelPath ( ' dataminer ' ) - ' /dataMiner/ ' ; 

Ensuite, $this->iconPath est insere dans tous les chemins d'images. 
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"<img src=\ " img/details .gif \ " ... 

"<img src=\ "". $this->iconPath. " img/details .gi£\ " ... 

Un probleme supplemental surgit si vous examinez le code HTML du plugin dans le resultat 
du frontend. dataMiner produit son propre en-tete HTML, qui doit bien sur etre supprime. La 
methode _head() qui se trouve dans le code contient I'en-tete HTML en question. 

function _head ($ title ) { 
$this->_load_skin ( ) ; 

?> 

<!-- $Id: dataMiner. php.v 1.11 2003/06/02 17:55:18 rlineweaver Exp $ --> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 

<html> 

<head> 

<titlex?php echo $title; ?></title> 
<meta name- " robots " content- "noindex" > 
<style> 

BODY , TD , P , HI , H2 , H3 , H4 , FORM { 

font-family:Helvetica, Arial, sans-serif; f ont-size : 95% ; } 
. NEW { 

color:<?php echo $this->newFileColor ; ?>; } 
. HDR { 

color:<?php echo $this->bodyTextColor ; ?>; font-size : lOpt ; 
font-weight: bold; } 
.TIT { 

color:<?php echo $this->siteNameColor ; ?>; 
background-color : <?php echo $this->menubarColor ; ?>; 
font-size : 14pt ; font-weight: bold; } 

</style> 
</head> 

<body bgcolor- " #<?php echo $this->bodyBgColor ; ?>" 
link-"#<?php echo $this->rowLinkColor ; ?>" 

marginwidth-"<?php echo $this->bodyMarginSize; ?>"> 
<?php echo $this->_colorbars ( $this->headDiv) ; ?> 

<table border-0 cellspacing-0 cellpadding-2 width-"<?php 

echo $this->siteWidth; ?>"> 
<trxtd class="TIT"x?php echo $title; ?></tdx/tr> 



En principe, I'entierete de I'en-tete, y compris la balise <body>, peut etre supprimee. La mise en 
forme est controlee par CSS, ce dernier etant lui-meme defini a partir d'« habillage », que Ton 
voit une fois que la fonction _load_skin() est appelee. La fonctionnalite des habillages doit etre 
enlevee, mais le controle par CSS doit demeurer. Le code CSS peut etre recupere dans I'HTML 
du frontend, puisque les variables ont ete remplacees par les couleurs correspondantes de 
I'habillage par defaut. Vous pouvez ainsi supprimer a la fois I'en-tete HTML genere par _head() 
et la methode _load_skin(). Dans la methode _foot(), les balises </bodyx/html> doivent 
aussi etre eliminees, pour que le plugin se limite a I'affichage du contenu de dataMiner. 
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A present, la page creee ne eontient plus du tout de CSS, et dataMiner ne s'affiehe plus cor- 
rectement. Vous pourriez inclure le code CSS enregistre precedemment dans un fichier pour 
le site, mais il est preferable que le CSS soit associe a I'extension. C'est possible si vous utilisez 
TypoScript pour Integration de la mise en forme : 

plugin . tx_dataminer . _CSS_DEFAULT_STYLE ( 
. tx-dataminer-pil . NEW { 

colonffffOO; } 
.tx-dataminer-pil . HDR { 

color : 000000; 

font-size : lOpt ; font-weight: bold; } 
.tx-dataminer-pil .TIT { 

color : f f f f f f ; background-color : 111111 ; 
f ont-size : 14pt ; font-weight: bold; } 

Puisqu'une telle configuration TypoScript insere le code CSS dans I'en-tete de la page, on 
ne peut pas changer ce CSS par une feuille de style externe. C'est la raison pour laquelle la 
configuration TypoScript au sein du fichier static/setup.txt est enregistree dans I'extension. Le 
fichier est integre dans ext_tables.php, le rendant disponible en tant que gabarit statique. 

// add TS/CSS to static templates 
t31ib_extMgm: : addStaticFile ( $_EXTKEY , ' static/ ' , 'dataMiner: CSS ' ) ; 

Le code CSS est insere uniquement si le gabarit statique est insere dans un enregistrement de 
gabarit. 

Le code HTML du frontend a deja tres belle allure. La methode JoadJavascriptfJ, qui integre 
un fichier JavaScript a I'aide de la balise <script>, fait partie de la classe dataMiner. Cette 
methode est adaptee, d'une part pour avoir des chemins de fichiers corrects, et d'autre part, 
pour que la balise apparaisse dans I'en-tete HTML. 

_load_javascript ( ) { 

print "<script language=\ " j avascript\ " src=\ " lib/dM . j s\ " ></ script>\n" ; 

_load_javascript ( ) { 

$GLOBALS [ ' TSFE ' ] ->additionalHeaderData [ $this->pObj ->pref ixld] = 
'<script type="text/javascript" src="'. 

$GLOBALS [ 'TSFE' ] ->absRef Prefix. t31ib_extMgm: : siteRelPath ( ' dataminer ' ) . 
' dataMiner/lib/dM. j s " ></script> ' ; 

Pour que cela fonctionne, I'objet plugin dans tx_dataminer_pi1 doit etre mis a la disposition 
de I'objet dataMiner. 

Pour rendre les liens compatibles avec le plugin, un peu de travail manuel est malheureuse- 
ment necessaire. De simples remplacements de texte ne suffisent pas ici. Le parametre _=b 
est simplement omis, parce que b active le mode « affichage liste », qui est de toute facon le 
mode par defaut. A d'autres endroits, le tiret de soulignement est remplace par mode, ce qui 
est plus explicite. 

De plus, pour des raisons d'uniformisation, page est renommee pointer puisque, dans la classe 
tslib_pibase, cette fonction est remplie par le parametre pointer. 
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$string.= "<a href =\ " " . $_SERVER [ ' PHP_SELF ' ] . 
" ?_=b&page={$this->num_pages}\ "> " . 

"<img src=\ " img/last . gif \ " border=\ " 0\ " alt=\ "Last\ " ></a> " ; 

$icon = '<img src-" ' . $this->iconPath. 

' img/ last . gif " border-"0" al t= " Las t " > ' ; 
$ string. = $this->pObj ->pi_linkTP_keepPIvars ( $icon, 

array( ' pointer '->$ this->num_pages ) , 0) ; 

L'URL de destination doit bien entendu aussi etre adaptee. 

print '<form action= " ' . $_SERVER [ ' PHP_SELF ' ] ... 

print '<form action= " ' . $this->pObj ->pi_linkTP_keepPIvars_url ( ) ... 

A ce stade, les liens sont corrects, mais les parametres transferes ne sont pas reconnus. La 
solution a apporter est simple puisque les parametres sont evalues dans dataMiner par la 
methode _get_value(). Si vous utilisez $this->pObj->piVars[] ici, la plupart des parametres 
seront reconnus correctement. Quelques ajustements pour les donnees POST doivent etre faits 
dans la methode _var_setup(). 

Puisque t3lib_pibase prend completement en charge le traitement des parametres, on peut 
supprimer le code restant relatif aux sessions PHP. 

Bien que la connexion a la base de donnees soit effective, il serait preferable de se passer 
de la couche Metabase. Puisque dataMiner encapsule I'acces a la base de donnees dans une 
classe distincte, nous devons aussi ici recourir aux fonctions de MySQL de la couche de base 
de donnees de TYP03. Ces fonctions ne garantissent pas d'abstraction de la base de donnees, 
comme les fonctions exec_* de t3lib_DB, mais sont mises en oeuvre dans cette application 
sans trop d'efforts. 

$result = $this->query ( $query) ; 
$row = $this->f etch_array ($result) ; 

$result = $GLOBALS [ ' TYP03_DB ' ] ->sql_query ( $query ) ; 
$row = $GLOBALS [ ' TYP03_DB ' ] ->sql_f etch_assoc ( $result ) ; 

dataMiner comporte de nombreuses options de configuration quant au choix des champs a 
editer ou a afficher, ou quant a la denomination de ces champs. Vous vous apercevrez tres vite 
qu'il y a un parallelisme avec les definitions TCA. II semble opportun de configurer dataMiner 
automatiquement a partir du TCA. Pour ce faire, I'extension System language labels (lang) est 
installee, puisqu'elle n'est pas disponible par defaut dans le frontend. II faut determiner les 
noms corrects des champs. 

require_once ( t31ib_extMgm: : extPath ( ' lang' ) . ' lang.php ' ) ; 

$LANG = t31ib_div: : makelnstance ( 'language' ) ; 

$dm->f ields = array_keys ( $TCA [ $dm->table] [' columns ']) ; 
$dm->title = $LANG->sL ( $TCA [ $dm-> table] [ ' Ctrl ' ] [' title ']) ; 
$dm->orderby = $TCA [ $dm->table] [' Ctrl '][' sorting '] ; 
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foreach ( $TCA [ $dm->table] [' columns ' ] as $column => $def) { 
$dm->humanize ( $column, $LANG->sL ( $def [ ' label ' ] ) ) ; 
if ($def [ 'config' ][ 'default' ] ) { 

$dm->def value ( $column, $def [ ' config' ] [ ' default ' ] ) ; 

} 

} 



Que reste-t-il a faire ? La configuration via TypoScript est souhaitable, ainsi que la possibility 
de selectionner les tables a afficher dans I'element de contenu plugin. 

Nos efforts pour porter le script en valent-ils la peine ? La reponse a cette question est difficile. 
II aurait ete possible d'integrer le script plus facilement-mais aussi de facon moins correcte. 
Meme une reecriture complete ou une solution mixte est envisageable. Avec dataMiner, vous 
disposez d'une application qui fonctionne deja, vous permettant ainsi de proceder a des tests 
durant le processus de portage, ce qui constitue un grand avantage. 

Au cours d'une derniere etape, vous pourriez supprimer le code redondant pour arriver a une 
fonctionnalite de type TCA, ce qui ferait de cette extension une application purement TYP03. 



7.7 Programmation du backend : principes 

Par programmation backend, on entend la programmation de composants qui ajoutent des 
fonctionnalites dans le backend. II s'agit en general de modules, de sous-modules ou d'entrees 
dans le menu contextuel. 

Com me I'URLvous I'indique lorsque vous vous identifiez, le backend se trouve dans le repertoire 
typo3/. A propos, il est tout a fait possible d'effacer le backend d'une installation TYP03 pour 
ne garder que le frontend. 

Les modules sont normalement situes au sein de leurs propres extensions ; pour les modules 
standards, par contre, ce n'est pas toujours le cas pour des raisons historiques. Neanmoins, 
ces derniers sont correctement integres dans le systeme, et quelques-uns d'entre eux pour- 
raient certainement se retrouver dans des extensions. D'autres modules se trouvent dans le 
repertoire typo3/mod/ et d'autres encore directement dans typo3/. Le module Web — > Liste, 
par exemple, a son propre fichier conf.php dans le repertoire typo3/mod/web/list/ ; mais le 
script du module est en fait situe dans typo3/db_list.php. II est correctement configure via 
le fichier conf.php, et done disponible dans le systeme. Ces exceptions mises a part, tous les 
nouveaux modules sont developpes en tant qu'extensions. 

7.7.1 Structure d'un module 

Par opposition au frontend oil toutes les requetes transitent via un seul fichier - a savoir 
index.php, un lien symbolique vers tslib/index_ts.php -, dans le backend, chaque module dis- 
pose de son propre fichier PHP fournissant I'ensemble des fonctionnalites. Dans le cas du mo- 
dule Web — > Liste, le fichier est db_list.php. Le nom de fichier du module dans les extensions 
est invariablement index.php puisque chaque module est inclus dans son propre repertoire. 

En general, un module est compose des fichiers suivants : 
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conf .php 

index . php 

locallang.php 

1 o c a 1 1 ang_mo d . php 

moduleicon.gif 

conf.php 

Le module est integre dans le systeme via ce fichier. II est cree par le Kickstarter et ne 
doit normalement pas etre modifie. 

de£ine( 'TYP03_MOD_PATH' , ' . . /typo3conf /ext/user_recentchanges/modl/ ' ) ; 

$BACK_PATH- '../../../../ typo3 / ' ; 

$MCONF [ ' name ' ] - ' tools_urecentchangesMl ' ; 

$MCONF [' access ' ] = ' admin ' ; 

$MCONF [' script ' ] = ' index . php ' ; 

$MLANG [' default '][' tabs_images '][' tab' ] = 'moduleicon.gif; 
$MLANG[ 'default '][' ll_ref ] = 

' LLL : EXT : user_recent changes /modi / local lang_mod . php ' ; 

En premier lieu, la constante TYP03_M0D_PATH est definie. El le eontient le ehemin 
vers le module depuis le repertoire typo3/. 

La variable $BACK_PATH eontient le chemin relatif vers le repertoire typo3/. Grace 
a cette variable, on peut rendre les modules independants de leur position dans la 
hierarchie des repertoires. Le gestionnaire d'extensions adapte ces ehemins dans les deux 
premieres lignes durant Installation. C'est la raison pour laquelle les extensions conte- 
nant des modules ne peuvent pas etre deplacees manuellement vers le repertoire d'une 
autre extension. 

La cle name du tableau $MCONF[] definit un nom unique pour le module. La cle access 
specifie les permissions d'acces au module. Alors que la valeur admin limite I'acces aux 
seuls administrateurs, le module est rendu disponible pour les utilisateurs normaux avec 
user.group. Mais I'acces en lui-meme est en definitive controle par la configuration des 
enregistrements pour les utilisateurs et les groupes d'utilisateurs. 
L'icone qui apparaTt dans la barre des modules est inseree dans le tableau $MLANG[]. La 
reference a un fichier externe pour les langues est aussi specifiee. 

locallang_mod.php 

Ce fichier est aussi cree par le Kickstarter et eontient le titre et la description du module 
dans differentes langues. Les cles suivantes sont utilisees a cet effet : 

mlang_tabs_tab 

Un titre court pour la navigation 

mlang_labels_tablabel 

Un titre un peu plus long comme description du titre court ou comme en-tete 
dans Aide — > sur les modules 

mlang_labels_tabdescr 

Description du module en plusieurs phrases ; est aussi repris dans Aide — > sur les 
modules 
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index.php 

Le script du module lui-meme 

locallang.php 

Le fichier de langue associe au script du module. 

Le seul fichier absolument indispensable au module est conf.php. Tous les autres fichiers 
peuvent porter d'autres noms et se trouver a d'autres endroits, pour autant qu'ils soient cor- 
rectement definis dans conf.php. Mais puisque le Kickstarter met en place ces fichiers sous 
cette forme, et que des deviations par rapport a ce schema n'apportent pas plus de clarte, 
vous devriez essayer d'adopter cette structure autant que possible. 

t31ib_extMgm: :addModule ( 'web' , 

' ushopinf oMl ' , 

t31ib_extMgm: : extPath ( $_EXTKEY) . 'modi/ ' ) ; 

Dans I'exemple ci-dessus, le module ushopinfoMl est insere dans le module principal 
web. 

7.7.2 Module: framework 

Les fichiers et les classes suivants sont inseres par les modules : 
init.php 

Ce fichier doit etre integre par chaque module. Un certain nombre de bibliotheques 
sont integrees, I'utilisateur est identifie, la configuration du systeme est chargee et les 
chemins sont initialises. 

Les constantes suivantes sont definies apres I'appel de init.php : 

PATH_thisScript 

Chemin absolu vers le script du module 

PATH_typo3 

Chemin absolu vers le backend TYP03 

PATH_typo3_mod 

Chemin relatif vers le module depuis typo3/ 

PATH_site 

Chemin absolu vers le site Web 

PATH_t3lib 

Chemin absolu vers t3lib/ 

Les objets globaux sont disponibles apres que init.php a ete appele : 

$BE_USER 

Utilisateur backend 

$LANG 

Gestion des langues 
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$TYP03_DB 

Acces a la base de donnees 

t3lib_SCbase 

C'est la classe de base pour les scripts des modules. En particulier, el le fournit un frame- 
work complet pour le support des fonetions de sous-modules. De plus, cette classe 
gere automatiquement la configuration d'un module, des menus, et le passage des pa- 
rametres. Son fonctionnement est decrit plus en detail grace aux exemples suivants. 

Les variables suivantes dans les scripts des modules sont : 
$this->id 

Contient I'lD de la page courante tant que le module est situe dans le module 
principal Web ; les modules de la zone Fichiers trouvent ici le chemin courant. 

$this->CMD 

Est fixee par t3lib_div::_GP('CMD') et est disponible pour votre propre utilisation. 

$this->perms_clause 

Contient une clause SQL WHERE sur la table pages, qui filtre les pages pour les- 
quelles I'utilisateur courant n'a pas de permission. 

$this->MOD_MENU 

Tableau des menus ; son utilisation sera illustree par les exemples suivants. 
$this->MOD_SETTINGS 

Le tableau pour la configuration des menus. 

$this->modTSconfig 

Les modules TSConfig, bases sur le TSConfig des pages et le TSConfig Utilisateur. 

template, smallDoc, mediumDoc, bigDoc 

Le fichier typo3/template.php contient plusieurs classes pour la restitution des mo- 
dules. Les differentes classes sont cependant toutes des variantes de template, defi- 
nissant des largeurs de sorties, puisque, a cause du cadre de navigation, les modules 
dans Web doivent etre de largeur plus petite que les modules dans Outils. Par conven- 
tion, $this->doc dans les modules contient une instance de template, ou d'une de ses 
variantes. Le Kickstarter utilise deja $this->doc dans le code qu'il genere : 

/ / Ouput page header 
$this->content . -$this->doc->startPage ( $LANG->getLL ( ' title ' ) ) ; 
$this->content . =$this->doc->header ( $LANG->getLL ( ' title ' ) ) ; 
$this->content . =$this->doc->spacer ( 5 ) ; 

t3lib_BEfunc 

Cette classe contient des fonetions utiles pour la programmation backend, e'est-a-dire 
pour I'acces a la base de donnees, le cache, TSConfig, I'arborescence et I'affichage des 
modules. La fonction de menu est particulierement utilisee. Cette classe, tout comme les 
deux suivantes, ne sont pas instanciees, mais leurs fonetions sont appeleesdirectement : 

t31ib_BEfunc : : getFuncMenu ( $this->id, 

'SET [function] ' , 

$ thi s - >MOD_SETTINGS [ ' function' ] , 
$this->MOD_MENU[ ' function' ] ) ; 
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t3lib_div 

La serie de fonctions t3lib_div est bien sur aussi a votre disposition pour le developpe- 
ment dans le backend. 

t3lib_ieonworks 

Ensemble de fonctions pour la creation et la fourniture d'icones ; par exemple : 

t31ib_iconWorks : : getlconlmage ( ' tt_content_search ' , array ( ) , $BACK_PATH) 

t31ib_iconworks : : getlconlmage ($table, $row, $BACK_PATH, 

' class= " c-recicon" titles " ' . $iconAltText . ' " ' ) 

La fonction t3lib_iconWorks::skinlmg() determine le nom d'un fichier en fonction d'une 
icone et d'un habillage donnes. Vous devriez aussi utiliser cette fonction pour vos propres 
icones, pour pouvoir habiller librement votre application. 

Pour les details sur les classes de I'API, referez-vous par exemple a la documentation sur I'API 
disponible dans I'extension ExtDevEval. 

7.7.3 Modules : script 

La structure de base d'un script de module ressemble habituellement a ceci : 

unset ($MCONF) ; 

require ('conf.php'); 

require ($BACK_PATH. 'init.php' ) ; 

require ( $BACK_PATH . ' template . php ' ) ; 

$LANG->includeLLFile ( ' EXT : user_example /modi / local lang . php ' ) ; 
require_once (PATH_t31ib. ' class . t3 lib_scbase .php ' ) ; 
$BE_DSER->modAccess ( $MCONF , 1 ) ; 

class user_example_modulel extends t31ib_SCbase { 

function menuConfigO { 
} 

function main{) { 

} 

function printContent ( ) { 
} 

} 

$SOBE = t31ib_div: :makelnstance ( ' user_example_modulel ' ) ; 
$SOBE->init ( ) ; 
$SOBE->main ( ) ; 
$SOBE->printContent ( ) ; 

On integre d'abord le fichier conf.php. Comme nous I'avons deja mentionne, conf.php ne 
contient pas seulement de I'information importante pour le backend, mais aussi la variable 
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$BACK_PATH, qui specifie le chemin relatif au repertoire typo3/, auquel on fait frequemment 
reference dans le script. 

Ensuite, le fichier initphp du repertoire typo3/ est integre. Ce fichier initialise I'environnement 
du module et est absolument indispensable. Le prochain fichier a etre integre, template. php, 
contient une bibliotheque pour I'affichage du module. 

A present, I'objet pour la gestion des langues est disponible dans $LANG. La definition des 
langues pour le module est chargee et in itia Usee. 

La classe de base du module t3lib_SCbase est alors integree. Le module est une classe qui etend 
t3lib_SCbase. La methode menuConfigO definit les menus et les options pour le module. El le 
est appelee par la classe de base. 

Pour finir, a la fin du script, une instance de la classe de module est creee et appelee. C'est aussi 
la raison pour laquelle on les appelle « SC» (t3lib_SCbase), c'est-a-dire les classes de script 
(Script Classes) : elles contiennent la classe du module, mais cette classe est aussi appelee. Le 
nom $SOBE est obligatoire car des bibliotheques externes peuvent y faire reference. 

7.7.4 Module principal 

II est aussi possible de creer, par exemple via le Kickstarter, un nouveau module principal tel 
que Web, Utilisateur ou Outils. C'est supporte par le Kickstarter. La creation d'un module 
principal avec un cadre de navigation (tel que Web ou Fichier) n'est pas encore supportee par 
le Kickstarter, mais est possible. Voici un exemple du module principal Media et du module 
Media — > Liste. 

modl/conf.php 

define ( 'TYP03_MOD_PATH' , ' . . /typo3conf /ext /dam/modi/ ' ) ; 
$BACK_PATH- '../../../../ typo3 / ' ; 

$MCONF [ ' name ' ] = ' txdamMl ' ; 
$MCONF [ ' access ' ] = 'user , group ' ; 

$MCONF [ ' navFrameScript ' ] = ' alt_dam_navf rame .php ' ; 
$MCONF[ 'defaultMod' ] =' list ' ; 

La cle navFrameScript definit le script a appeler dans le cadre de navigation. Le cadre 
lui-meme est cree par le backend. 

modl/list/conf.php 

define ( ' TYP03_MOD_PATH ' , ' . . /typo3conf /ext /dam/modi /list/ ' ) ; 
$BACK_PATH- '../../../../../ typo3 / ' ; 

$MCONF [ ' name ' ] = ' txdamMl_list ' ; 
$MCONF [' access '] - ' group , user ' ; 
$MCONF [ ' script ' ] = ' index. php' ; 

ext_tables.php 

t31ib_extMgm: : addModule { ' txdamMl ' , ' ' , ' ' , 

t31ib_extMgm: : extPath ( 'dam' ) . 'modi/ ' ) ; 
t31ib_extMgm: : addModule (' txdamMl ' , 'list', '', 

t31ib_extMgm: : extPath ( 'dam' ) . 'modi/list/ ' ) ; 
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C'est ici qu'on declare les modules au systeme : d'abord le module principal txdamMl 
et ensuite le module list en tant que sous-module. 

7.7.5 Fonctions de sous-modules 

Plusieurs modules tels que Web — > Fonctions ou Utilisateur — > Centre de taches offrent la 
possibility d'incorporer des fonctions. Ces fonctions de sous-modules peuvent etre des exten- 
sions separees. Apres I'installation, elles s'affichent dans le menu du module correspondant. 
Certaines fonctions de sous-module sont discutees plus en detail dans I'exemple Web — > 
Fonctions — > Assistants. 



7.8 ProgTammation backend : exemple 

Les exemples suivants donnent un apercu des possibilities existantes permettant d'ajouter de 
nouvelles fonctionnalites au backend. 

Pour vos propres projets, le Kickstarter vous fournit deja un cadre adequat. Si certaines fonc- 
tions manquent, consultez d'autres modules pour voir si vous pouvez y retrouver des fonctions 
similaires. Si vous cliquez sur le bouton droit de votre souris dans le cadre du module, la plu- 
part des navigateurs vous donneront des informations sur I'URL selectionnee, ce qui doit vous 
indiquer le repertoire dans lequel se trouve le script du module. Vous pouvez des lors etudier 
le code source de ce module. 

La version 3.8 de TYP03 a ete utilisee pour les exemples backend, comme ce fut le cas pour les 
exemples frontend. 

7.8.1 Outils — > Dernieres modifications 

Le premier exemple de programmation backend est un module qui affiche les dernieres modi- 
fications apportees aux pages. Seuls les administrateurs auront acces au module dans Outils. 
lis auront quelques options d'affichage sous la forme d'un menu de selection et d'une case a 
cocher. De plus, les enregistrements et les pays sont affiches avec des liens qui vous redirigent 
respectivement vers le module des pages ou vers le formulaire de modification de I'enregistre- 
ment. 



Figure 7.39: 
Le module Dernieres 
modifications 




482 



7.8 Programmation backend : exemple 



On cree d'abord une extension en tant que module dans le Kickstarter. Le module est sauve 
sous Tools et I'option Admin-only access ! est activee. 
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figure 7.40: 
Creation du module 
avec /'extension 
Kickstarter 



Le module est rapidement configure puisque seules quelques options doivent etre activees. Le 
Kickstarter cree les fichiers suivants : 

ext_emconf . php 
ext_icon . gi f 
ext_tables .php 
modi/ 

clear . gif 

conf . php 

index. php 

locallang .php 

1 o c a 1 1 ang_mod . php 

moduleicon.gif 

Le module est declare au systeme dans le fichier ext_tables.php. 

t31ib_extMgm: : addModule (' tools ' , ' urecentchangesMl ' , '', 

t31ib_extMgm: : extPath ( $_EXTKEY) . 'modi/' ) ; 

Le fichier modl/index.php contient le module. Si le module vient d'etre cree et installe, il 
produit deja I'affichage par defaut repris a la figure 7.41 . 

Dans le fichier index.php se trouve deja la structure de base du module. Un menu et quelques 
exemples d'affichage ont deja ete generes. 

Ci-dessous, vous retrouvez le code du module termine. II est recommande de creer le module 
via le Kickstarter, pour que vous puissiez voir les differences. Le concept du module consiste a 
selectionner I'information de la table sysjog qui fournit les details sur les pages et les enregis- 
trements recemment modifies, et qui les affichent dans une table. Vous y trouverez egalement 
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d'autres informations telles que les ieones, les titres, le rootline, et I'aide contextuelle avec les 
ID. 



Figure 7.41: 
Affichage du module 
apres sa creation par 
le Kickstarter 



^ BT3-Enterprise 
Chemin: / 



Function #1 



MESSAGE #ll 



Hello V/oHd! 



The 'Kickstarter' has made this module automatically, it contains a default 
framework for a backend module but apart from it does nothing useful until you 
open the script 'typo3conf/ext/nico_module/modl/index.php' and edit it! 



This is the GET/POST wars sent to the script: 
GET; 
EMPTY! 

POST; 
|EMPTYi| 



En premier lieu, le module est initialise par index.php. Par opposition au Kickstarter, aucun 
changement n'est ici necessaire. 

// DEFAULT initialization of a module [BEGIN] 
unset ($MCONF) ; 
require ( ' conf . php ' ) ; 
require ($BACK_PATH. 'init.php' ) ; 
require ( $BACK_PATH . ' template . php ' ) ; 

// Include locallang file for module 
$LANG->includeLLFile ( 'EXT:user_recentchanges/modl/locallang.php' ) ; 

// Include module base class 
require_once (PATH_t31ib. ' class . t3 lib_scbase .php ') ; 

// This checks permissions 

// and exits if the users has no permission for entry. 
$BE_USER->modAccess ($MCONF, 1) ; 

// DEFAULT initialization of a module [END] 

class user_recentchanges_modulel extends t31ib_SCbase { 

La premiere methode de la elasse du module surcharge menuConfigf) de t3lib_SCbase. Les 
definitions de tous les menus et des options du module sont situees dans $this->MOD_ME- 
NU[]. Typiquement, la cle function contient la definition du menu principal, qui est gene- 
ralement restitue sous forme d'un champ de menu de selection. Le Kickstarter I'a deja cree 
a titre d'exemple. Les options pour afficher uniquement les nouveaux contenus, les contenus 
modifies ou les deux a la fois doivent etre inclus dans le menu principal du module. Le tableau 
de menu est rempli par les cles correspondantes. 

/ * * 

* Adds items to the ->MOD_MENU array. 

* Used for the function menu selector. 
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* ©return void 
*/ 

function menuConfigO { 
global $LANG; 

$ thi s - >MOD_MENU = Array ( 
'function' -> Array ( 

'newAndUpdated' => $LANG->getLL ( 'newAndUpdated' ) , 
'updated' => $LANG->getLL (' updated ') , 
'new' => $LANG->getLL ( ' new' ) , 

) , 

' showRootline ' => true, 

) ; 

parent: : menuConf ig ( ) ; 

} 

Les textes des elements de menu sont traduits vers les langues de I'utilisateur via $LANG 
->get±L(), si la langue existe. Les definitions dans les differentes langues se trouvent dans 
modl/locallang.php : 

$ LOC AL_L ANG = Array ( 

'default' => Array ( 

'title' => 'Recent changes', 

' f r ' => Array { 

'title' -> 'Dernieres modifications', 

'showRootline' => 'Afficher rootline', 

'new' => 'Contenu cree', 

'updated' => 'Contenu modifie', 

'newAndUpdated' => 'Contenu cree et modifie', 

'new_header' => 'Dernier contenu cree:', 

'updated_header ' => 'Dernier contenu modifie:', 

'newAndUpdated_header ' => 'Dernier contenu cree et modifie:', 

' admins_only ' => 'Module reserve aux admins!', 

) , 

Pour des raisons de simplicity et de clarte, et meme si ce n'est pas neeessaire, nous avons utilise 
la meme ele pour le menu et pour la definition des langues. 

Retour au code du module. Outre function, $this->MOD_MENU contient aussi I'entree show- 
Rootline, une valeur booleenne qui est utilisee comme case a cocher. Pour finir, parent::me- 
nuConfigO est appele pour terminer la configuration du menu. 

La methode suivante est main(), la methode principale du script du module. Le nom repond 
a une convention, meme si ce n'est pas obligatoire. Quelques initialisations du module sont 
effectuees ici. L'affichage du module est genere, par souci de clarte, par moduleContent(), qui 
ne se situe pas a I'interieur de cette methode. 

/ * * 

* Main function of the module. Write the content to $this->content 

* ©return void 
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*/ 

function main ( ) { 

global $BE_USER , $LANG , $BACK_PATH ; 

Tout d'abord, on verifie si I'utilisateur a bien les droits d'administrateur. 

if ($BE_USER->user [ 'admin' ] ) { 

Dans le code cree par le Kickstarter, cette ligne est un peu differente. De plus, on y initialise 
$this->pageinfo, qui se refere a la page courante selectionnee. Le code Kickstarter est mis en 
place pour etre utilise dans le module Web. Mais, puisque le module fonctionne dans le module 
principal Outils, dans lequel le concept de page selectionnee n'a pas de sens, cette partie du 
code a ete supprimee. 

Ensuite, un objet template ou plus precisement bigDoc est cree dans $this->doc (cf. sec- 
tion 7.7.2). 

// Init the module doc 
$this->doc = t31ib_div: :makelnstance ( 'bigDoc ') ; 
$this->doc->backPath = $BACK_PATH ; 

$this->doc->f orm = '<form action-"" method- " POST ">' ; 

Le code JavaScript qui suit a ete genere par le Kickstarter et est necessaire a la fonction des 
menus : 

// JavaScript, used for menus 
$this->doc->JScode = $this->doc->wrapScriptTags ( ' 
function jumpToUrl (URL) { 

document . location = URL; 

} 

' ) ; 

La page HTML a afficher est initialisee via I'objet template, et le titre du module est affiche. Le 
tout est enregistre dans la variable $this->content. 

/ / Ouput page header 
$this->content . = $this->doc->startPage ( $LANG->getLL ( ' title ' ) ) ; 
$this->content . = $this->doc->header ( $LANG->getLL ( ' title' ) ) ; 
$this->content . = $this->doc->spacer ( 5 ) ; 

Le menu est cree. On utilise a cette fin les fonctions de t3lib_BEfunc. On passe $this->id en 
argument a ces fonctions. Pour les modules de la zone Web, cette variable contient I'lD de la 
page selectionnee. Cette derniere est envoyee au script courant par la fonction de menu via le 
parametre id, qui est reconnu par t3lib_SCbase. Ceci n'a bien sur pas de sens dans un module 
de la zone Outils, puisque I'arborescence n'est pas disponible dans ce cas, et que le module 
est suppose afficher uniquement les pages qui ont change. Nous laissons neanmoins ce code, 
puisqu'il ne derange en rien, et qu'il pourrait etre utile si le module devait etre place plus tard 
dans la zone Web. 

// Output menu 
$menu = array ( ) ; 
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$menu [ ] - t31ib_BEfunc : : getFuncMenu ( $this->id, 

'SET [function] ' , 

$ thi s - >MOD_SETTINGS [ ' function' ] , 
$this->MOD_MENU[ ' function' ] ) ; 

SET[function] definit le parametre qui permet de passer la valeur du menu au script du mo- 
dule. $this->MOD_SETTINGS['function'] contient la valeur eourante et $this->MOD_MENU 
['function'] est la definition du menu sous forme d'un tableau qui contient les valeurs et 
les textes que I'utilisateur visualisera. En voici le comportement : un menu de selection est 
cree, qui, grace a la fonction JavaScript jumpToUrl() ajoutee ci-dessus, envoie la valeur du 
menu selectionne par I'utilisateur au script du module avec le parametre SET[function]. Le 
parametre SET est evalue par la classe de base du module t3lib_SCbase, compare avec $th is 
->MOD_MENU[] et sauvegarde dans $this->MOD_SETTINGS[]. Pour finir, cette configuration 
du module est enregistree dans la base de donnees, pour qu'a la prochaine visite, I'utilisateur 
retrouve le module dans I'etat ou il I'a laisse. 

La case a cocher se comporte de la meme maniere. 

$menu [ ] - t3 lib_BEf unc : : getFuncCheck ( $ this->id, 
' SET [showRootline] ' , 

$this->MOD_SETTINGS[ 'showRootline' ] ) . ' ' . 
$LANG->getLL ( 'showRootline' ) ; 
$this->content . =$this->doc->section ( ' ' , implode ( ' <br /> ' , $menu) ) ; 
$this->content . =$this->doc->divider (5) ; 

Le contenu du module est cree en appelant la methode moduleContent(). 

// Render content: 
$this->moduleContent ( ) ; 

Pour finir, I'icone de raccourci est affichee. 

// Shortcut 
if ($BE_USER->mayMakeShortcut ( ) ) { 

$this->content . = $this->doc->spacer ( 2 0 ) . 
$this->doc->section ( ' ' , 

$this->doc->makeShortcutIcon ( ' id' , 

implode ( ' , ' , array _keys ( $this->MOD_MENU) ) , 
$this->MCONF [ 'name' ] ) 

) ; 

} 

$this->content . = $this->doc->spacer ( 10 ) ; 

Si I'utilisateur n'est pas administrateur, il ou elle recoit I'avertissement suivant : 

} else { 

// If no access: output message 

$this->doc = t31ib_div: :makelnstance ( 'bigDoc' ) ; 
$this->doc->backPath = $BACK_PATH ; 
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$this->content . = $this->doc->startPage ( $LANG->getLL ( ' title' ) ) ; 
$this->content . = $this->doc->header ( $LANG->getLL ( ' title' ) ) ; 
$this->content . = $this->doc->spacer ( 5 ) ; 
$this->content . = $this->doc->section ( ' ' , 

$LANG->getLL ( ' admins_only ' ) ) ; 
$this->content . - $this->doc->spacer ( 10 ) ; 



La methode suivante, printContent(), a ete creee par le Kickstarter. Lorsqu'elle est appelee, la 
page HTML generee est finalement affichee, ce qui a lieu a la fin du fichier. 

I * * 

* Prints out the module's HTML code 

* ©return void 
*/ 

function printContent ( ) { 

$this->content . = $this->doc->endPage ( ) ; 
echo $this->content; 

} 

La methode moduleContentfJ est aussi inseree par le Kickstarter. Dans de nombreux modules, 
elle contient une construction de type switch() qui permet d'appeler differentes fonctions du 
module au moyen de $this->MOD_SETTINGS['function'] ou d'autres options. Dans ce cas, la 
valeur de $this->MOD_SETTINGS['function'] est d'abord determinee par la methode $this 
->getRecentChangesTable(). La valeur _header est aussi definie, de sorte que le texte de I'en- 
tete est determine via sa valeur dans locallang.php. 

i * * 

* Generates the module content 

* ©return void 
*/ 

function moduleContent ( ) { 
global $LANG; 

$mode = $this->MOD_SETTTNGS [' function' ] ; 
$content = $this->getRecentChangesTable ( $mode) ; 

$this->content . = $this->doc->section ( $LANG->getLL ( $mode . '_header ' ) , 

$content, 0,1); 

} 



/ * * 

* Render the table with recently changed records 

* Sparam string Mode from $this->MOD_SETTINGS [ ' function' ] 

* ©return string Rendered Table 
*/ 

function getRecentChangesTable ( $mode ) { 

global $BACK_PATH, $BE_USER, $LANG, $TCA; 
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En utilisant cette methode, le tableau resultat, reprenant les dernieres pages editees, est cree. 
Le parametre $mode passe en argument determine la valeur de la variable $action, qui filtre 
les entrees de la table sysjog grace a la requete suivante : 

// Set sys_log actions depending on selected mode 
if ( $mode== ' new' ) { 

Saction = ' 1 ' ; 
} elseif ( $mode== ' updated' ) { 

faction = ' 2 ' ; 
} else { 

faction = '1,2'; 

} 

// Query sys_log for non-deleted pages only 
$res = $GLOBALS['TYP03_DB']->exec_SELECTquery( 
' sys_log . * ' , 
' sys_log , pages ' , 
'pages . uid=sys_log . event_pid' . 
' AND svs log .event pid>0 ' . 
' AND sys_log . type-1 ' . 

' AND sys_log. action IN {'. faction. ')' . 
' AND sys_log. error- 0 ' . 
t31ib_BEfunc : : deleteClause ( 'pages' ) , 

' tstamp DESC , 
40) ; 

Pour I'affichage du tableau, on utilise la methode $this->doc->table(), qui restitue un tableau 
en se basant sur la definition suivante. Le tableau Stable est utilise pour eontenir les donnees 
de la table. 

// init table layout 
$tableLayout = array ( 

'table' => array ('<table border="0" cellpadding= " 1 " cellspacing 
= " 1 " class= " typo3-recent-edited" > ' , 
'</table>' ) , 
'defRow' => array ( 

' tr ' => array{'<tr class- "bgColor4 ">','</ tr> ') , 
'defCol' => Array('<td valign= " top"> ' , ' </ td> ' ) 

) 

) ; 

$table = array!) ; 
$tr = 0; 

Dans la boucle suivante, les entrees de la table sysjog sont traitees pour etre restituees dans 
le tableau. 

while ( $logRow = $GLOBALS [ ' TYP03_DB ' ] ->sql_f etch_assoc ( $res ) ) { 
$page_id = $logRow [ ' event_pid ' ] ; 

$pageRow = t3 lib_BEfunc :: getRecord (' pages ' , $page_id) ; 
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Tout d'abord, on retrouve I'enregistrement de la page a partir de ND dans la table sysjog. 
Pour la premiere colonne du tableau a afficher, un lien est genere avec I'icone par la methode 
getltemFromRecordO pour I'edition de la page ($contentPagel_ink). Pour la derniere colonne, 
I'heure de la derniere modification ($contentAge) estgeneree. 

if { is_array { $pageRow) ) { 

// Create output item for pages record 
$contentPageLink = $this->getItemFromRecord ( 'pages ' , $pageRow) ; 

// Create output text describing the age 
$contentAge = t3 lib_BEf unc : : dateTimeAge ( $logRow [ ' tstamp ' ] , 1); 

Ensuite, les details concernant I'element modifie de la page sont crees. 

$contentElementLink = ' ' ; 
$contentUser = 



// Fetch record if table is not "pages" 
if ( ! ( $logRow [ ' tablename ' ] -- 'pages ' ) ) { 

$elementRow = t3 lib_BEf unc : : getRecord { 

$logRow [ ' tablename ' ] , 
$logRow [ ' recuid' ] ) ; 

L'enregistrement sysjog contient de I'information sur la table et I'uid de I'enregistrement 
modifie. On fait une recherche sur cet uid ; s'il existe, un lien pour I'edition du record est cree 
dans la seconde colonne ($contentElementl_ink). 

// If record is deleted continue with next log entry 
if ( ! is_array ( $elementRow) ) { 
continue ; 

} 

// Create output item for non pages record 
if ( ! ( $logRow [ ' tablename ' ] == ' pages ' ) ) { 

$contentElementLink = $this->getItemFromRecord ( 

$logRow [ ' tablename ' ] , 
$elementRow) ; 

} 

} 

La table contient aussi de I'information a propos de I'utilisateur qui est intervenu sur la page. 
On selectionne d'abord I'enregistrement depuis la table be_users et ensuite, un lien pour son 
edition est cree ($contentUser). 

// Create user item 
$userRow = t31ib_BEfunc :: getRecord ( 'be_users ' , 

$logRow[ 'userid' ] ) ; 

if (is_array ($userRow) ) { 

$contentUser = htmlspecialchars ( $userRow [ ' username ' ] . 

' ('. $userRow[ 'uid' ].')') ; 
$contentUser = $ this->wrapEditLink ( $contentUser , 

'be_users ' , 
$userRow[ 'uid' ] ) ; 
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Si I'utilisateur est i'utilisateu r courant, une couleur d'arriere-fond differente est utilisee dans 
le tableau $tableLayout pour la ligne en question, pour mettre en evidence le fait que cette 
page a ete modifiee par I'utilisateur lui-meme. 

// Use different row color 
// if record was edited by current user 
if ( $userRow[ 'uid' ] ==$BE_USER->user [ 'uid' ] ) { 
$tableLayout [$tr] [ ' tr ' ] = array! 

'<tr class= "bgColor5 "> ' , 

'</tr>' ) ; 

} 

} 

Pour finir, les donnees sont eerites dans le tableau Stable. Apres la boucle, e'est-a-dire apres 
avoir traite toutes les entrees de sysjog, on restitue le tableau avec $this->doc->table(). 
Vous pourriez bien sur simplement construire la table HTML par des chaines de earacteres — 
c'est juste une question de gout. 

// Add row to table 
$td=0; 

$table[$tr] [$td++] = $contentPageLink; 
$table[$tr] [$td++] = $contentElementLink; 
Stable [ $tr] [ $td++] = $contentUser ; 
Stable [$tr] [$td++] = $contentAge ; 
$tr++; 

} 

} 

// Return rendered table 
return $ this->doc->table ( $table , $tableLayout) ; 

} 

La methode suivante cree un element d'enregistrement pour son affichage dans le tableau en 
fonction du nom de la table et du tableau contenant les donnees de I'enregistrement. 

/ * * 

* Returns a linked icon with title from a record 

* @param string Table name (tt_content, . . . ) 

* @param array Record array 

* ©return string Rendered icon 
*/ 

function getltemFromRecord ( $table , $row) { 

global $BACK_PATH , $LANG, $TCA, $BE_USER; 

Tout d'abord, le texte de I'attribut title (aide contextuelle) de I'icone est cree. L'aide contextuelle 
s'affiche si vous positionnez la souris sur I'icone. 
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$iconAltText = t31ib_BEfunc : : getRecordlconAltText ( $row, $ table ) ; 

// Prepend table description for non-pages tables 
if ( ! ($table=='pages' ) ) { 

$iconAltText = $LANG->sl ( $TCA [ $table] [' Ctrl '][' title '])-' : '. 

$iconAltText ; 

} 

Pour montrer clairement de quel type d'enregistrement il s'agit, c'est-a-dire a quelle table il 
appartient, le texte est precede du titre de la table, pour autant qu'il ne s'agisse pas de la table 
pages. 

Le titre de I'enregistrement est alors determine. Les definitions TCA contiennent de I'infor- 
mation sur les champs de la base de donnees a afficher en tant que titre. Sur base de cette 
information, la fonction t3lib_BEfunc::getRecordTitle() determine le titre. Aussi longtemps 
que I'option showRootline a ete activee via la case a cocher, le chemin de rootline de la page 
est deduit et, si necessaire, raccourci selon la longueur que I'utilisateur a specifiee dans Utili- 
sateur — > Configuration. 

// Create record title or rootline for pages 
// if option is selected 
if ($table==' pages' AND $this->MOD_SETTINGS [' showRootline '] ) { 
$elementTitle = t31ib_BEf unc : : getRecordPath ( $row [ ' uid' ] , 

'1=1' , 
0) ; 

$elementTitle = t31ib_div : : f ixed_lgd_cs ( $elementTitle , 

- ($BE_USER->uc [ ' titleLen' ] ) ) ; 

} else { 

$elementTitle = t31ib_BEfunc : : getRecordTitle ( $table, $row, 1); 

} 

Enfin, I'icone generee avec le titre est restituee avec un lien vers I'edition et renvoyee. 

// Create icon for record 
$elementIcon = t31ib_iconworks : : getlconlmage ( $table , $row, 
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$BACK_PATH , 

'class="c-recicon" titles" ' . $iconAltText . ' " ' ) ; 



// Return item with edit link 
return $this->wrapEditLink ( $elementIcon . $elementTitle , 

$ table, 
$row[ 'uid' ] ) ; 



La derniere methode du module cree un lien qui soit appelle le module des pages (pour les 
pages) via JavaScript, soit affiche directement un enregistrement dans un mode d'edition (pour 
les enregistrements des autres tables). 

i * * 

* Wraps an edit link around a string. 

* Creates a page module link for pages, edit link for other tables. 



* Oparam string The string to be wrapped 

* @param string Table name ( tt_content , . . . ) 

* Sparam integer uid of the record 

* ©return string Rendered link 
*/ 

function wrapEditLink { $str , $table, $id) { 
global $BACK_PATH ; 



if ( $table-- 'pages ' ) { 

$editOnClick = " top . f sMod. recentlds [ ' web' ] = " . $id. " ; " ; 

$editOnClick. = " top . goToModule ( 'web_layout' , 1) ; " ; 
} else { 

$params = ' &edit ['.$ table .']['. $id .'] =edit ' ; 

$editOnClick = t31ib_BEfunc : : editOnClick ( $params , $BACK_PATH) ; 

} 

return ' <a href- " # " onclick- " ' . html spec ialchars ( $editOnClick) .'">'. 

$str . ' </a> ' ; 

} 
} 



Comme vous le remarquez, le module des pages est appele via une fonction JavaScript a partir 
du cadre principal. L'lD de la page a ete fixe prealablement, et est passe au module lorsque ce 
dernier est appele. 

Le lien pour editer un enregistrement est cree avec les parametres correspondants par la fonc- 
tion t3lib_BEfunc::edit0nClick(). 

Enfin, a la fin du fichier, on instancie et on appelle la classe du module. 

// Make instance: 

$SOBE = t31ib_div: : makelnstance ( ' user_recentchanges_modulel ' ) ; 
$SOBE->init ( ) ; 

// Include files? 

foreach($SOBE->include_once as $INC_FILE) include_once ( $INC_FILE) ; 



$SOBE->main ( ) ; 
$SOBE->printContent ( ) ; 



493 



7 Developpement d'extensions 



La structure d'un module permet d'ecrire facilement des extensions. II est simple d'ajouter 
des elements de menu ou de nouvelles options. Par exemple, une vue detaillee pourrait etre 
developpee avee une methode separee et etre appelee depuis moduleContent(). 



Figure 7.43: 
Nouvel assistant en 
tant que sous-module 
de Web — » Fonctions 



7.8.2 Fonction de sous-module Web — > Fonctions — > Assistants 

TYP03 propose la classe t3lib_extobjbase comme base des fonctions de sous-modules. La 
classe de base t3lib_SCbase contient une interface vers t3lib_extobjbase. Grace a cette com- 
binaison, il est relativement aise de construire des modules qui comprennent des fonctions de 
sous-modules et les sous-modules eux-memes. 

Dans I'exemple ci-dessous, une fonction de sous-module va etre incorporee dans Web — > 
Fonctions — > Assistants. La fonction va marquer de maniere recursive les pages pour activer 
ou desactiver la recherche. Cette option, appelee Sans recherche, est normalement disponible 
dans I'en-tete de la page. 



g| i B2C-Accueil 
Chemin: /B2C-Accueil/ 



Selection d'Assistant: Activer a recherche sur ies page; [recursif) v 
ACTIVER LA RECHERCHE SUR LES PAGES (RECURSIF) 



Profondeur; 2 Niveaux 



3 B2C-Accueil 

Accue " 
Q Actualites 

[^| Nouveautes-Details 
■ p] Evenements 

L...^ Dates individuelles 
Q Produits 
Q Produit 1 
Q Produit 2 
Q Produit 3 
.QX Produit 4 
Oj Cornrnercants 
r ftj Fonctions 
| accueil 

| D impassion 
i Q plan du site 

! Q contact 

Corbeille 



Activer la recherche ) I Desactiver la recherche 



L'affichage de la fonction de sous-module demarre uniquement avec Activer la recherche 
sur les pages, puisque cette fonction est incorporee dans Fonctions — > Assistants. Chaque 
module qui permet les fonctions de module fournit, si necessaire, un cadre ou des fonctions de 
base, qui peuvent prendre plusieurs formes, selon la fonctionnalite du module. Dans ce cas, le 
module affiche un menu de selection de fonctions de sous-module, ainsi qu'un en-tete avec la 
page courante que I'utilisateur a selectionnee via I'arborescence du cadre de navigation dans 
le module Web. Cette page est la page de depart des assistants. 
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La nouvelle fonction de sous-module utilise la page courante comme point de depart a partir 
duquel on parcourt I'arborescence. Le nombre de niveaux de I'arborescence qui seront par- 
courus peut etre specifie par I'utilisateur grace a un champ de selection. Les pages sont aussi 
affichees sous forme d'arborescence et leur statut Sans recherche est indique pour chacune 
d'elles. Les pages pour lesquelles I'utilisateur n'a pas le droit de changer le statut sont mises 
en surbrillance. Pour finir, il ou elle peut modifier le statut de toutes les pages affichees avec 
seulement deux boutons. 



Manu: | Malta now extension 



KICKS I AKIbH Wl£AKl) 




Enter extension koyi 

| Update.. n 
[ Total torm | 

[ VlOW result | 
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Oili.l WOP ..uriin.eril. 



Extend existing modules with new function • menu items, Examples are extensions such as 
"iKerjTsde i".»nr»r. Mo«a*jmg" vhlrh aiirt* internal managing tn TYPil.V ilr "Weh^-Infn, 
Page TSeontig' which shows the Page TSeontiguratie-n tor a page, Or "Web>-Fone, Wizards, 



Set uaye> seardiaLle (rcturjive) (Fnglnh] 
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Figure 7.44: 
Creation d'une 
fonction de 
sous-module Web 
Fonctions — > 
Assistant par /e 
Kickstarter 



Puisque le Kickstarter supporte directement les fonctions de sous-module dans Web — > Fonc- 
tions — > Assistants, un cadre de base est rapidement mis en place. 

Exceptes le composant pour le francais, la langue supplemental, et le composant General 
info, I'extension contient uniquement une fonction de sous-module qui est creee par I'option 
Integrate in existing Modules. 

Le Kickstarter genere les fichiers suivants : 

ext_emconf . php 
ext_icon.gif 
ext_tables .php 
locallang_db . php 
modfuncl/ 

class . user_setsearch_modf unci .php 

locallang .php 



Les fichiers locallang contiennent les differentes langues, comme d'habitude. Dans le fichier 
ext_tables.php, la fonction de sous-module est declaree : 
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t31ib_extMgm: : insertModuleFunction { 
' web_f unc ' , 

'user_setsearch_modfuncl ' , 

t31ib_extMgm: : extPath ( $_EXTKEY) . 

'modf unci /class . user_se t sear ch_modf unci . php ' , 

' LLL : EXT : user_setsear ch/ local lang_db . php : moduleFunc t ion . user_setsearc 
h_modfuncl ' , 
'wiz ' 

) ; 

Le Kickstarter a cree dans class.user_setsearch_modfunc1 .php un bout de code exemple dans 
lequel une option de menu a ete introduite et affichee en tant que case a cocher. 

require_once (PATH_t31ib. ' class . t31ib_extobjbase. php ' ) ; 

class user_setsearch_modf unci extends t31ib_extobjbase { 
function modMenu { ) { 
global $LANG; 

return Array ( 

'user_setsearch_modfuncl_check' => '', 

) ; 

} 

function main{) { 

global $BE_USER, $LANG, $ BACK_PATH ; 

$out . =$this->pObj ->doc->spacer (5 ) ; 

$out . =$this->pObj ->doc->section ( $LANG->getLL ( ' title' ) , 

'Dummy content here. . . ' , 0, 1) ; 

$menu-array ( ) ; 

$menu [ ] =t31ib_BEfunc : : getFuncCheck ( $this->pObj ->id, 
' SET [user_setsearch_modf uncl_check] ' , 

$this->pObj->MOD_SETTINGS [ ' user_setsearch_modf uncl_check ' ] ) . 
$LANG->getLL ( ' checklabel ' ) ; 
$out . =$this->pObj ->doc->spacer (5 ) ; 

$out . =$this->pObj ->doc->section ( 'Menu' , implode ( ' - ' , $menu) ,0,1) ; 
return $out; 

} 

} 

Une fonction de sous-module est une extension de t3lib_extobjbase. Les fonctions de sous- 
module sont instanciees et initialises par le module ou par la classe t3lib_SCbase. Par con- 
sequent, les fonctions de sous-module ne peuvent normalement contenir que les methodes 
modMenufJ et main(). Si la fonction de sous-module n'a pas ses propres options de menu qui 
doivent etre enregistrees dans la configuration du module, alors la methode modMenu() n'est 
pas necessaire. 

La methode main() est appelee par le module parent et doit renvoyer le code HTML pour 
la fonction de sous-module. Le code HTML est normalement genere dans les modules ba- 
ckend par I'instance de la classe template (typo3/template.php), disponible dans le module 
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via $this->doc. Puisque I'objet du module parent est disponible dans la fonction de sous- 
module via $this->pObj, on accede a I'objet template par $this->pObj->doc. II s'agit de la 
difference principale entre les fonctions de sous-modules, les modules et les sous-modules. 

La fonction est supposee afficher I'arborescence des pages a modifier. La classe t3lib_pageTree 
deja disponible est utilisee a cet effet. Mais elle necessite d'etre quelque peu modifiee et 
etendue. Puisque I'extension, de par sa cle d'extension, a comme espace de nommage user_ 
setsearch, la classe qui en derive est nommee user_setsearch_pageTree. 

require_once (PATH_t31ib. ' class . t31ib_pagetree . php ' ) ; 

* local version of the page tree 

* which points the title link to the current script 
* 

* ©author Rene Fritz <r . f ritz@colorcube . de> 
*/ 

class user_setsearch_pageTree extends t31ib_pageTree { 
function wrapTitle ($title, $v) { 

$aOnClick = 'return j umpToUrl ( \ ' ' . $this->thisScript . ' ?id= ' . 

$v [ ' uid' ] . ' \ ' , this) ; ' ; 
return ' <a href-"#" onclick- "'. htmlspecialchars ( $aOnClick) .'">' . 

$title. '</a>' ; 

} 

} 

Seule la methode wrapTitle() est modifiee pour creer un lien approprie vers le titre de la page. 
En cliquant sur le titre de la page, I'utilisateur determine aussi la page de depart lorsque I'ar- 
borescence est affichee. Pour ce faire, le script du module parent est appele via le parametre 
id avec I'uid de la page comme valeur. Le parametre id est standard pour les modules Web, 
il est transfere par I'arborescence au cadre de navigation. La classe de module t3lib_SCbase 
reconnaTt ce parametre et I'enregistre dans la variable $this->id. De cette facon, ND est aussi 
disponible dans la fonction de sous-module via $this->pObj->id. 

La classe de fonction de sous-module, comme nous I'avons deja mentionne, est une extension 
de t3lib_extobjbase. Les variables requises sont definies dans I'en-tete de la classe. 

require_once (PATH_t31ib. ' class . t31ib_extobjbase .php ' ) ; 

* Creates the "set searchable" wizard 
* 

* ©author Rene Fritz <r . f ritz@colorcube . de> 
*/ 

class user_setsearch_modfuncl extends t31ib_extobjbase { 

* Page tree object 

* @see t31ib_pageTree 
*/ 

var $tree; 
/ * * 
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* The current target script ( index. php) 

*/ 

var $thisScript; 

Le menu de selection determinant le nombre de niveaux dans I'arborescence des pages est 
defini dans la methode modMenu() et est renvoye dans un tableau. Ce dernier est associe au 
tableau du module $MOD_MENU et ses valeurs sont automatiquement enregistrees avec la 
configuration du module. On a deja prevu la traduction du mot « levels » qui est utilise ici. 

I * * 

* Adds menu items: Levels menu 
* 

* ©return array 

* ©ignore 
*/ 

function modMenu ( ) { 
global $LANG; 

$levelsLabel = $LANG->sL ( 

' LLL : EXT: lang/locallang_mod_web_perm. php : levels ' ) ; 

return array ( 

'user_setsearch_modfuncl_depth' => array ( 

1 => '1 ' . $levelsLabel, 

2 => '2 ' . $levelsLabel, 

3 -> '3 ' . $levelsLabel , 

4 => '4 ' . $levelsLabel, 
10 => '10 ' . $levelsLabel 

) 

) ; 

} 

La methode principale est appelee par le module parent et renvoie le code HTML. 

/ * * 

* Main function creating the content for the module. 
* 

* ©return string HTML content for the module, actually a "section" 

* made through the parent object in $this->pObj 
*/ 

function main ( ) { 

global $BE_USER, $LANG, $BACK_PATH ; 

$this->thisScript = basename (PATH_thisScript) ; 

Le nom du script du module parent est enregistre dans $this->thisScript, car il sera utilise a 
plusieurs reprises. 

Ensuite, on appelle $this->getPageTree(). Cette methode, qui sera decrite plus tard, initialise 
I'arborescence. 

$this->getPageTree ( ) ; 
$out = 
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// title 

$out.= $this->pObj ->doc->spacer ( 5 ) ; 

$out .= $this->pObj->doc->section($LANG->getLL ( 'title' ) , ' ' , 0, 1) ; 

La variable $out accumule le resultat HTML. On affiche d'abord le titre de cette fonction de 
sous-module. Le titre est defini dans le fichier locallang.php et est automatiquement lu lors 
de Initialisation de la fonction de sous-module. 

Le menu de selection servant a determiner le nombre de niveaux dans I'arborescence est re- 
pris ci-dessous. La fonction t3lib_BEfunc::getFuncMenu() cree un menu en se basant sur les 
parametres GET/POST de SET[]. La classe de base du module t3lib_SCbase reconnaTt tous les 
parametres passes par SET[] et les compare avec la configuration du module, disponible dans 
MOD_SETTINGS. De cette facon, le module lui-meme ne se soucie pas de I'enregistrement des 
options du module. Le prefixe correct (user_setsearch_modfunc1) doit etre de toute maniere 
utilise pour eviter les collusions avec d'autres extensions. 

// depth menu 

$menu = $LANG->sL ( ' LLL : EXT : lang/ local lang_mod_web_perm. php : Depth ' ) . 

t31ib_BEf unc : : getFuncMenu ( $this->pObj ->id, 
' SET [user_setsearch_modfuncl_depth] ' , 

$this->pObj ->MOD_SETTINGS [ ' user_setsearch_modf uncl_depth ' ] , 
$ thi s - >pOb j - >MOD_MENU [ ' user_setsearch_modf uncl_depth ' ] ) ; 

$out.= $this->pObj ->doc->spacer ( 5 ) ; 

$out . = $this->pObj ->doc->section ( ' ' , $menu, 0,1); 

Ensuite, I'arborescence creee par la methode showPageTreefJ est affichee. 

// output page tree 
$out . = $this->pObj ->doc->spacer ( 10 ) ; 

$out . = $this->pObj ->doc->section ( ' ' , $this->showPageTree 0,0,1); 

Puisque le module parent a deja insere la balise <form>, cette derniere doit d'abord etre 
refermee, puisqu'une autre URL est requise pour specifier Taction de cette fonction de sous- 
module. 

// new form {close old) 
$out . = ' </f orm> ' ; 

$out.= $this->pObj ->doc->spacer ( 10 ) ; 

Dans le sous-module, on reprend seulement les ID des pages dont la case a cocher Sans re- 
cherche doit etre modifiee. La modification de cette valeur est effectuee par le TCE (TYP03 
Core Engine), qui est disponible pour les modules dans le script typo3/tce_db.php. Line nou- 
velle balise <form> est inseree avec tce_db.php comme cible. 

// call tce_db.php script with the commands 
$out.- '<form action-"'. 

$BACK_PATH . ' tce_db . php " method= " POST " name= " editform" > ' ; 
$out.= '<input type= "hidden" name="id" value="'. 

$this->pObj->id. ' ">' ; 
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Le script tce_db.php accepte une serie de commandes qui sont passees, dans les lignes qui 
suivent, en tant qu'elements caches. Tout d'abord, I'URL de redirection est specifiee par redi- 
rect. II s'agit en fait du module parent dont le nom est deja present dans $this->thisScript. La 
constante TYP03_MOD_PATH definit le chemin relatif du script a partir du repertoire typo3/ 
oil se situe tce_db.php. 

$out.= '<input type="hidden" name= " redirect " value="'. 

TYP03_MOD_PATH. $this->thisScript . ' ?id= ' . $this->pObj ->id. ' ">' ; 

De cette maniere, un renvoi vers le script appelant est fait via une redirection, sans que I'utili- 
sateur ne remarque I'appel a tce_db.php. 

Nous considerons a present la commande pour modifier la valeur de la case a cocher Sans 
recherche. La premiere ligne demande a tce_db.php de mettre a 1 le champ no_search de 
I'enregistrement de la table pages dont I'lD est $this->pObj->id. En theorie, on doit repeter 
cette action pour chaque page de I'arborescence selectionnee ; mais il existe une facon plus 
elegante de proceder. 

$out.= '<input type="hidden" name= " data [pages ][' . 

$this->pObj->id. ' ] [no_search] " value= " 1 " > ' ; 

Grace a la commande mirror, vous demandez a tce_db.php d'effectuer le meme changement 
sur une serie d'enregistrements. La methode $this->getEditablePageslDList(), qui est reprise 
ci-dessous, fournit les ID des pages de I'arborescence. 

$out.- '<input type-"hidden" name- "mirror [pages ][' . 

$this->pObj ->id. ' ] " value=" ' . $this->getEditablePagesIDList ().'">'; 

On donne un nom aux boutons de soumission suivant leur fonction afin d'envoyer le formu- 
laire. Un bouton a mis, via JavaScript, la valeur de la case a cocher de 1 a 0 dans la balise 
<input>. 

// submit buttons 
$out.= '<input type="submit" name="setSearchable" value="'. 

$LANG->getLL ( 'setSearchable' ) . 

' " onclick= "document . editform[\ ' data [pages] [' . 
$ this->pObj ->id . ' ] [no_search] \ ' ] ■ value- 0 ; " > ' ; 
$out.- '<input type-"submit" name- " setNonSearchable " value-"'. 

$LANG->getLL ( ' setNonSearchable ').'">'; 

return $out; 

} 

Pour terminer, le code HTML est renvoye au module appelant. A propos, la balise <form> n'est 
pas fermee, puisque le module inserera une ou plusieurs balises pour terminer son propre 
formulaire. La methode getPageTree() utilise la classe user_setsearch_pageTree pour creer 
I'arborescence. La methode $this->pObj->perms_clause est disponible pour determiner I'ex- 
pression SQL qui exclut les pages pour lesquelles I'utilisateur n'a pas de permission. 

/ * * 

* Reads the page tree 
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* ©return void 
*/ 

function getPageTree ( ) { 

global $BE_USER, $LANG, $BACK_PATH ; 

$this->tree = t31ib_div: :makelnstance ( 'user setsearch paqeTree' ) ; 
$this->tree->init ( ' AND ' . $ this->pObj ->perms_clause ) ; 

En speeifiant setRecs=true, les enregistrements des pages sont rassembles par I'objet et sont 
disponibles par apres. makeHTML=true active la generation de I'arborescence sous forme de 
code HTML. Le parametre $this->thisScript est transfere puisque wrapTitle() doit creer un 
hyperlien. 

$this->tree->setRecs = true; 
$this->tree->makeHTML = true; 

$this->tree->thisScript = $this->thisScript; 

On ajoute alors I'ensemble des champs de la base de donnees qui devront etre disponibles par 
la suite. 

$this->tree->addField ( 'no_search' ) ; 
$this->tree->addField ( ' perms_userid ' , 1) ; 
$this->tree->addField ( ' perms_groupid ' , 1) ; 
$this->tree->addField ( ' perms_user ' , 1 ) ; 
$this->tree->addField ( ' perms_group ' , 1 ) ; 
$this->tree->addField ( ' perms_everybody ' , 1) ; 

// Creating top icon; the current page 
$HTML = t31ib_iconWorks :: getlconlmage ( 'pages ' , $ this->pObj ->pagein£o , 

$BACK_PATH , ' al ign= " top " ' ) ; 

$this->tree->tree [ ] = 

array! ' row ' =>$ this->pObj ->pagein£o , ' HTML ' ->$HTML) ; 

// read the page data and create the tree 
$this->tree->getTree ( $this->pObj ->id, 

$this->pObj - >MOD_SETTINGS [ 'user_setsearch_modfuncl_depth' ] ) ; 

} 

Avant que I'arborescence ne soit finalement lue par getTreefJ, la racine, c'est-a-dire la page 
courante, doit etre determinee. 

La methode showPageTreef) cree la table avec une arborescence et I'affichage du statut. Bien 
que la classe t3lib_pageTree ne contienne pas la methode permettant d'afficher I'arborescence 
complete en HTML, on ne I'utilise pas ici, car la case a cocher doit etre reprise dans le tableau 
affiche a cote de la page. 

II est assez normal d'elaborer le code HTML manuellement dans les modules. Mais il existe un 
certain nombre de fonctions dans t3lib_BEfunc ou dans I'objet template (->doc) qui peuvent 
vous etre utiles. t3lib_BEfunc::getFuncMenu() ou ->doc->section() ont deja ete donnees 
comme exemple. Dans cette methode, le tableau de I'arborescence des pages est cree par 
->doc->table(). Comme nous I'avons deja dit, vous pouvez placer le tableau directement dans 
le code. 



501 



7 Developpement d'extensions 



Tout d'abord, la mise en forme du tableau est definie par le tableau $tableLayout. La balise 
<table> est definie, avec defRow contenant les balises pour les lignes et les colonnes 0 et 1. 
Une couleur d'arriere-fond differente est definie pour la ligne 0 dans la balise <tr>. 

* Creates the page tree table 

* ©return string rendered HTML table 
*/ 

function showPageTree ( ) { 

global $BE_USER , $LANG , $BACK_PATH ; 

// init table layout 
$tableLayout = array { 

'table' -> array {'<table border-" 0" cellspacing- " 0 " 
cellpadding= " 0 " id="typo3-tree" style= "width : auto ;">' , '</table>'), 
'defRow' -> array { 

'tr' => array ('<tr class= "bgColor-20 " > ' , ' </tr> ' ) , 
'0' => array ('<td nowrap= "nowrap " > ' , ' </ td> ' ) , 
'1' => array('<td aligns " center " styles "border-left : solid 
lpx ' . $this->pObj ->doc->bgColor .'">', ' </td> ' ) , 
) , 

' 0 ' -> array ( 

'tr' -> array ('<tr class- "bgColor2 ">' ( ' </tr> ') , 

) 

) ; 

Le tableau bidimensionnel Stable rassemble les contenus du tableau en lignes et en colonnes. 
L'icone tt_content_search est inseree dans la premiere ligne. L'icone est normalement utilisee 
pour le type de contenu Recherche et servira a illustrer la colonne indiquant le statut de la 
case a cocher Sans recherche. 

$table = array (); 
$tr = 0; 

// add header row 
$table[$tr] [0] =' '; 

$ table [ $tr++] [ 1] - '   ' . t31ib_iconWorks : : getlconlmage ( 

' tt_content_search' , 
array ( ) , 

$BACK_PATH ) . '  ' ; 

// walk through the tree list 
f oreach ( $this->tree->tree as $pageltem) { 

A present, chaque element de I'arborescence deja constitute est traite dans une boucle for- 
each. Les lignes suivantes specifient une couleur d'arriere-fond differente pour la ligne si I'uti- 
lisateur n'a pas de permission d'edition (2) pour la page. 

// if user has no access use a darker row background 
if ( ! ( $this->admin | 

$BE_USER->doesUserHaveAccess ($pageltem[ 'row' ] ,2) ) ) { 
$tableLayout [$tr] [ ' tr ' ] = 
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array ( ' <tr class="bgColor4 ">' , ' </ tr> ' ) ; 

} 

// get one page tree item 
$title = t31ib_div: : fixed_lgd( 

$this->tree->getTitleStr ( $pageltem [ ' row' ] ) , 
$BE_USER->uc [ 'titleLen' ] ) ; 
$treeltem = $pageltem [ ' HTML ' ] . 

$this->tree->wrapTitle ( $ title, $pageltem[ ' row' ] ) ; 

Lorsque le titre de la page a ete cree, et que I'icone existante a ete ajoutee, le statut de la case 
a cocher Sans recherche est determine : selon la valeur, on utilise le rouge ou le vert. 

// get current no_search flag 
if ( $pageltem [ ' row' ] [ ' no_search' ] ) { 

$searchFlag = '<span style- " color : red" >&times ; </span> ' ; 
} else { 

$searchFlag = '<span style- " color : green" >&bull ; </span> ' ; 

} 

// add row to table 
$table[$tr] [0] = $treeltem. ' inbsp;   ' ; 
$table[$tr++] [1] = $searchFlag; 

} 

// return rendered table 
return $ this->pObj ->doc->table ( $table , $tableLayout ) ; 

} 

Ensuite, la ligne du tableau est ajoutee, et a la fin de la boucle, le tableau est cree par ->doc 
->table() et renvoye. 

En utilisant la classe t3lib_pageTree (voir aussi t3lib_browseTree), vous pouvez vous faciliter 
la tache si vous devez manipuler des arborescences dans vos propres modules. D'une part, la 
classe fournit tous les enregistrements et, d'autre part, el le donne, si necessaire, I'arborescence 
pour I'affichage. 

II manque encore la methode getEditablePageslDListf), qui retourne une liste d'lD de pages 
separes par des virgules, pour lesquelles I'utilisateur a les droits d'edition. Cette liste est dressee 
dans le formulaire dans la methode mainfj et transferee a tce_db.php. 

i * * 

* Returns a comma separated list of page id's 

* which are accessible to the user 

* Sreturn string pages uid list 
*/ 

function getEditablePagesIDList ( ) { 

global $BE_USER, $LANG, $BACK_PATH ; 

$idListArr=array ( ) ; 



foreach ( $this->tree->tree as $pageltem) { 
if ( $this->admin | 

$BE_USER->doesUserHaveAccess ($pageltem[ ' row' ] , 2 ) ) { 



7 Developpement d'extensions 



$idListArr[] = $pagel tern [' row '][' uid '] ; 

} 

} 

return implode)',', $idListArr) ; 

} 
} 

7.8.3 Menu contextuel 

Dans cet exemple, un menu contextuel doit remplir le meme role que les fonctions precedentes 
de sous-modules, e'est-a-dire permettre ou non la recherche sur la page. Mais cette fois-ci, on 
ne considere que la page selectionnee. 

On cree rapidement une extension dans le Kickstarter pour inserer un element dans le menu 
contextuel. Comme toujours, I'extension est constitute par le composant General info, par 
les langues supplementaires et par les composants pour le menu contextuel, qui est cree par 
Clickmenu items. 



Figure 7.45: 
Creation d'un menu 
contextuel par le 
Kickstarter 
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Le Kickstarter cree les fichiers suivants : 

ext_emcon£ .php 
ext_icon . gif 
ext_tables .php 

class . user_setsearchcm_cml .php 

locallang .php 

cml/ 

clear . gif 
cm_icon.gif 
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conf .php 
index . php 
locallang .php 



Si vous installez et testez cette extension, une nouvelle entree apparaitra dans le menu contex- 
tuel, comme prevu. Un exemple de module cree par le Kickstarter est appele. II est situe dans 
le repertoire cml/. 




^ EE <^PL?>--Ami«il 
chemlni /B2C-Accueil/ 



| r,n*m »1 _| 



Figure 7.46: 
Nouvelle entree 
affichant le module 
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I'll 'I 



L'extension Extra Click Menu Options (extra_page_cm_options) propose pour I'essentiel la 
fonctionnalite d'activation ou non de la recherche dans une page. Si vous examinez la maniere 
dont cette fonction est implementee, vous arriverez a la methode DB_changeFlag(), qui se 
trouve dans typo3/alt_clickmenu.php. 

La methode fournit deja la fonctionnalite souhaitee pour changer la valeur du champ de la 
base de donnees (0 ou 1). La methode est relativement dense, et il n'est pas necessaire de la 
comprendre completement a ce stade. Mais il est interessant de noter que le meme concept 
est a nouveau utilise, consistant a appeler le TCE via le script tce_db.php, pour apporter les 
modifications a I'enregistrement de la page. Cela signifie que votre propre module, dans cml/, 
est inutile et peut etre efface. 

Les ieones representant les boutons dans le menu contextuel sont ajoutees a l'extension, ce 
qui explique la presence des fichiers suivants : 

button_no_search . gif 
button_unno_search. gif 
ext_emconf . php 
ext_icon . gi f 
ext_tables . php 

class . user_setsearchcm_cml . php 
locallang. php 



Le fichier class.user_setsearchcm_cm1.php contient la classe qui genere la nouvelle entree 
du menu. Le code a ete cree en grande partie par le Kickstarter. Nous ne mentionnerons ici que 
ses caracteristiques particulieres. 

class user_setsearchcm_cml { 
I * * 

* Adding options to the context menu. 
* 

* @param object The click menu object 

* @param array Menu items array 



505 



7 Developpement d'extensions 



* @param 

* @param 

* ©return 



string 
integer 



Name of the table of the clicked record item 



uid of the record 

Menu items array, processed. 



array 



*/ 

function main ( &$cmObj , $menultems, $table, $uid) { 
global $LANG; 

if ( ! $cmObj ->cmLevel ) { 

if ($cmObj->editOK) { 



// Returns directly, 

// because the clicked item was not from the pages table 



// load the language array 
$LL = $this->includeLL ( ) ,- 

// array for new menu items 
$localItems = array () ; 

// create new menu item if not disabled 
if ( ! in_array ( ' user_setsearchcm_cml ' , 

$cmObj ->disabledl terns ) ) { 



On verifie si I'entree du menu a ete desaetivee, ce qui est possible, par exemple, via TSConfig. 



$flagField = ' no_search ' ; 

$title = ($cmObj->rec [$flagField] ) ? 

$LANG->getLLL ( ' searchable ' , $LL) : 

$LANG->getLLL ( ' non_searchable ' , $LL) ; 

$localItems [ ' user_setsearchcm_cml ' ] = 
$cmObj ->DB_changeFlag ( 
'pages ' , 
$cmObj ->rec , 
$f lagField, 
$title, 
'no_search' , 

t31ib_extMgm: :extRelPath( 'user_setsearchcm' ) ) ; 



Grace a la methode DB_changeFlag() de I'objet de menu contextuel, on cree une entree pour 
le champ no_search de la table pages, qui selon son statut, affiche une des icones button_* 
et contient un lien vers le script tce_db.php, pour modifier la valeur du champ a 0 ou 1. 



L'entree du menu cree est inseree par la methode addMenultems() a la bonne place dans 
le menu existant, c'est-a-dire apres cacher (si celui-ci est disponible) ou avant Supprimer (y 
compris la ligne de separation). 



if ($table != 'pages') 



return $menultems; 



// add menu item 
$menultems = $cmObj ->addMenuItems ( 
$menultems , 
$local!tems , 



' after: hide, bef ore-spacer : delete' ) ; 
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} 

return $menultems ; 

} 

Pour finir, le tableau de menu modifie est renvoye. 

/** 

* Includes the [extDir] /locallang.php and 

* returns the $ LOC AL_LANG array found in that file. 



Oreturn array 



$LOCAL_LANG array 



function includeLL { ) { 

include ( t31ib_extMgm: :extPath( 'user_setsearchcm' ) . 'locallang.php' ) ; 
return $ LOC AL_LANG ; 

} 
} 

De plus, la classe contient a present une seule methode de lecture du fiehier des langues. 

Bien sur, de nombreuses entrees peuvent etre inserees par la methode presentee plus haut. De 
meme, on peut aussi creer de nouvelles entrees dans le second niveau de menu. L'extension 
Extra Click Menu Options (extra_page_cm_options) peut ici servir d'exemple. 

7.8.4 Habillages - Changer l'apparence du backend 

L'apparence du backend peut etre modifiee dans une large mesure. C'est la une operation facile 
a realiser parce qu'il existe une interface permettant de changer a la fois les couleurs, les logos 
et les icones du backend. Mais il y a des limites : les mentions de copyright et de la licence GPL, 
de meme que les scripts, ne peuvent pas etre modifies. 

Ces restrictions mises a part, vous pouvez certainement utiliser votre propre logo ou celui de 
vos clients a la place des images, comme le montre I'exemple qui suit. 



Reference 840654 




TYP03 Co»w*l«1MO-!004ll«)ioSkJrti» Crt<ra«ra»«a»mtf«of»i««Tei««ar«eiN>™(i 

^ Oo 10 malMrealcoM lor dcMU rvP03 comi «<h ABSOLUTELY NO WAIWAHTY M to cM«h Ihi n 



Figure 7.47: 
Habillage pour le livre 



Comme d'habitude, les modifications sont apportees via des extensions. Voici une liste des 
fichiers pour cet exemple d'habillage. Les fichiers comportant des modifications pour .'identi- 
fication sont repris en gras. 
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ext_tables . php 
stylesheet_post . ess 

backgrounds/ 

csm_back . png 
login_back . jpg 
logo f rame back . png 

mainmenu_back . png 
menu_back . j pg 
topf rame_back . png 
icons/ 

gfx/ 

alt_backend_logo . png 
al tmenul ine . png 
typo31ogo.png 

f ileicons/ 
ai . png 
au . png 
avi . png 

i/ 

_icon_f olders .png 
tt_content .png 

loginimages/ 

01 . png 

02 . png 

Comme vous pouvez le remarquer, il y a ici un seul fichier d'extension : ext_tables.php. L'ha- 
billage y est declare au systeme. Tous les autres fichiers sont des feuilles de style, des elements 
graphiques, ou des ieones. 

ext_tables.php 

Tout d'abord, le chemin d'extension relatif au repertoire du baekend (typo3/) est determine 
et sauve dans une variable temporaire. Cela evite par la suite plusieurs appels a la fonetion 
t3lib_extMgm::extRelPath(). 

// Setting the relative path to the extension in temp, variable: 
$temp_eP = t31ib_extMgm: : extRelPath ( $_EXTKEY) ; 

Toutes les modifications sont reportees a TYP03 via le tableau global $TBE_STYLES. Pour la 
page d'identification, on specifie le chemin oil sont situees les images illustratives a placer sur 
la partie gauche de la page. Si plusieurs images sont disponibles, elles seront selectionnees au 
hasard. 

// Setting login box image rotation folder: 
$TBE_STYLES [ ' loginBoxImage_rotationFolder ' ] = $temp_eP. 'loginimages/'; 

Tous les fichiers graphiques de TYP03 sont situes dans le repertoire t3lib/gfx/. Pour rempla- 
cer les images et les icones, vous devez indiquer a TYP03 le repertoire oil se trouvent les 
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nouvelles images. Si vous mettez en place la structure du repertoire gfx/ dans le nouveau 
repertoire d'images, les fichiers remplaceront les fichiers originaux de meme nom se trouvant 
dans t3lib/gfx/. Cela vaut aussi pour gfx/typo3logo.gif qui represente le logo s'affichant en 
haut a droite de la page d'identification. 

// Setting up auto detection of alternative icons: 
$TBE_STYLES [ ' skinlmgAutoCf g ' ] =array ( 

'absDir' => t3 lib_extMgm: : extPath ( $_EXTKEY) .' icons/ ' , 
'relDir' => $temp_eP. ' icons/ ' , 

// Force to look for PNG alternatives... 
' f orceFileExtension' -> 'png', 

) ; 

Les autres modifications sont faites via des feuilles de style. 

// Additional stylesheet. Set AFTER any styles in the document 
$TBE_STYLES [ ' styleSheetFile_post ' ] = $temp_eP. ' stylesheet_post . ess ' ; 



stylesheet_post.css 

/* Login Screen */ 

BODY#typo3-index-php { background-color: #£££; } 

BODY#typo3-index-php TABLE#loginwrapper { background-color: #C2C9CD; } 
BODY#typo3 -index-php DIV#copyrightnotice { font-size: llpx;} 
TABLE#logintable INPUT { border: #7B8295 solid lpx; } 



Comme nous I'avons deja mentionne, ces possibilites ne se limitent pas a I'identification. Vous 
pouvez changer completement I'apparence du backend, comme le montre la figure suivante. 
Un exemple de refonte du backend est I'extension d'habil lage skin360 (voir la reference de 
cette section). 
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7.9 Services 

Reference 052294 Les services fournissent un moyen de developper des fonetionnalites dansTYP03 qui pourront 
etre etendues ou remplaeees. 

L'extension DAM utilise des services, par exemple, pour lire les donnees meta des fichiers. 
Chaque format de fichier sauvegarde les donnees meta differemment (pour autant que cela 
soit permis). II est done necessaire d'ecrire une fonction ou une classe particuliere pour ehaque 
type de fichier pour lire ses donnees, les traiter et les convertir dans un format uniforme. 
Le DAM devrait alors appeler la fonction concernee, selon le type de fichier. Cette procedure 
n'est pas tres flexible, bien sur. Les nouvelles fonctions, et par consequent les types de fichiers 
correspondants, ne seraient disponibles qu'apres une mise a jour du DAM. De plus, les tiers 
auraient peu de possibilites pour de nouveaux developpements. Les services offrent un niveau 
d'abstraction qui contourne ces desavantages. 

Grace aux services, vous etes en position d'utiliser les classes PHP sans connaitre leur nom. 
Normalement, la creation d'une classe dans TYP03 ressemble a ceci : 

require_once ( t31ib_extMgm: :extPath( ' some_extension ' ) . 

' class . tx_some_extension_class .php ' ) ; 
$obj = t31ib_div: :makelnstance ( ' tx_some_extension_class ' ) ; 

Pour creer un objet, vous devez connaitre le fichier PHP dans lequel se situe la classe, ainsi que 
le nom de la classe. Ce n'est pas necessaire lorsqu'on recourt aux services. Un objet est cree de 
la maniere suivante : 

$serviceObj = t31ib_div: :makeInstanceService ( 'my_service_type' ) ; 

La difference, e'est que la classe est automatiquement selectionnee et que I'objet correspon- 
dent est cree sur base du type de service specifie. Les services doivent done avoir un type. 
L'extension DAM utilise par exemple les services de type metaExtract pour lire des donnees 
meta. 

Les services existent pour deux raisons : 

1. Liberte de mise en oeuvre 

Un service peut etre installe de differentes facons, a plusieurs reprises, et est done 
remplacable. C'est un avantage si la fonctionnalite est disponible uniquement sur une 
plate-forme specifique, ou via des outils externes. Le service qui est disponible et actif 
est utilise automatiquement. 

2. Ajout de fonetionnalites via des extensions 

Chaque service a un type defini par une chame de caracteres, comparable a la cle d'ex- 
tension. metaExtract est par exemple un type de service. Chaque type de service a sa 
propre API : un service qui lit les donnees meta comprendra des methodes differentes 
par rapport a un service qui ecrit des donnees de log. 

7.9.1 Mise en oeuvre des services 

Pour utiliser un service, vous devez bien sur connaitre le type de service et son API. Voici un 
exemple simple : 
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if ( is_object ($serviceObj = 

t31ib_div: rmakelnstanceService) 'textLang' ) ) ) { 
$language = $serviceObj ->guessLanguage ( $text ) ; 

} 

On sollicite un objet du type de service textLang et dans le meme temps, on verifie, via 
is_object(), si un objet a bien ete renvoye. Cette validation est neeessaire parce qu'il existe 
plusieurs raisons pour lesquelles un service serait indisponible : 

■ Un service du type souhaite n'est pas installe. 

■ Le service s'est desactive lui-meme durant I'enregistrement sur le systeme parce que, par 
exemple, il ne peut pas fonctionner sur le systeme. 

■ Le service a ete desactive par le systeme suite a une verification. 

■ Durant son installation, le service a lui-meme verifie s'il pouvait etre operationnel, et s'est 
desactive de lui-meme. 

Evidemment, il est possible que le service textLang ne soit pas installe sur le systeme. Votre ap- 
plication determine si le service est obligatoire ou non a son bon fonctionnement. Si neeessaire, 
vous pouvez afficher un message d'erreur, indiquant a I'utilisateur que le service correspondant 
doit etre installe. 



Sous-types 

Les services peuvent etre selectionnes, non seulement sur base d'un type, mais aussi sur base 
d'un sous-type. 

$absFile = ' /tmp/testf ile .pdf ' ; 
$fileType = 'pdf; 

$meta = array ( ) ; 

if { is_obj ect { $serviceObj = t31ib_div : rmakelnstanceService ( 'metaExtract ' , 

$fileT Y pe))) { 

$serviceObj->setInputFile($absFile, $fileType) ; 
if ( $serviceObj ->process ( ' ' , '', $meta) > 0 

AND (is_array ($svmeta = $serviceObj ->getOutput ( ) ) ) ) { 
$meta = $svmeta; 

} 

} 

lei, un service de type metaExtract est selectionne. Ce service peut traiter le sous-type pdf. De 
cette facon, vous etablissez une bibliotheque de services qui ont en commun la meme fonc- 
tionnalite et la meme API (par exemple, pour lire les donnees meta), mais qui sont implementees 
differemment pour chaque sous-type. Les sous-types ne se limitent pas au fichier repris dans 
cet exemple. lis peuvent, et doivent, etre definis pour chaque service qui les contient. II va de 
soi qu'il existe des services sans sous-type. 
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Services en cascade 

Jusqu'a present, un seul type de service a ete cree dans chaque instance pour editer les 
donnees. Mais il peut etre utile d'appliquer tous les services disponibles d'un certain type a 
vos donnees, ou simplement d'essayer tous les services jusqu'au moment ou vous obtenez un 
resultat. 

$subType = ' getUserFE ' ; 
$serviceChain = array ( ) ; 

while (is_object ($serviceObj = t31ib_div: imakelnstanceService { ' auth' , 

$subType, $serviceChain) ) ) { 

// add service key ti list of tried services 
$serviceChain [ ] = $serviceObj ->getServiceKey ( ) ; 

// initialize service 
$serviceObj ->initAuth ( $subType , $loginData, $info, $this); 

// call the service to get a login user 
if ($tempuser = $serviceObj ->getUser ( ) ) { 
// user found, just stop to search 
break; 

} 

} 

Le code est un extrait d'un developpement pour utiliser les services d'identification des utili- 
sateurs. 

On peut passer au troisieme parametre de makelnstanceService() une liste de cles de service 
(sous forme de tableau ou de liste d'elements separes par des virgules). Les services dans cette 
liste sont par la suite ignores. De cette maniere, vous pouvez appeler les services d'un type les 
uns apres les autres. Dans notre exemple, la boucle s'arrete lorsqu'un utilisateur a ete trouve. 

Appel de services specifiques 

Parfois, il peut etre utile de travailler sans niveau d'abstraction, et ne pas devoir selectionner 
automatiquement un service a partir de makelnstanceService(), mais appeler un service en 
particulier. C'est possible, car un service est enregistre non seulement via son type, mais aussi 
via la cle de service, qui joue un role analogue a celui de la cle d'extension. 

$serviceObj = t31ib_div: :makeInstanceService ( ' textExtract ' ) 
$serviceObj = t31ib_div: rmakelnstanceService ( ' tx_cctxtextphp_svl ' ) 

Mors qu'un type de service est specifie par textExtract pour lancer une recherche sur le service 
correspondant, dans le second exemple, un service specifique est cree via la cle tx_cctxtext- 
php_sv1. 

7.9.2 Developper des services 

Le developpement d'un service se fait via une extension. Comme d'habitude, nous demarrons 
dans le Kickstarter. II est tout a fait possible d'ajouter, au lieu d'un service, un plugin ou un 
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module a une extension. Mais cela n'a pas beaucoup de sens, puisque pour utiliser ee service, 
le plugin qui le contient doit etre installe, ce qui n'est sans doute pas la meilleure idee. 

Choisissez Services comme categorie de I'extension. Le nom du type de service devrait com- 
mencer par le titre de I'extension. De cette maniere, vous reconnaissez directement quel type 
de service est inclus. De plus, puisque les extensions sont automatiquement triees par le ges- 
tionnaire d'extensions, vous avez une vue d'ensemble. Un nouveau service est ajoute a I'exten- 
sion avec I'element de menu Services. 



Menu 1 I Male naw • »t»neinn 



KUK&IAHltK WWAKU 




Figure 7.49: 
Formulaire de 
definition d'un service 
dans le Kickstarter 



— ■■ 




rect.cn for rtf 




Descnpt 




,„«.,„« B + 


|Thii sen 


rice depends on PHP only. 


■» «*"» ■■ 








Service 1 


MM 




Enter i-Umion \>my: 

|cc_txtextphp 
Update. ■■ | 

Total form I 



Enter here the key to define which type of xervice thic xhould be 
E.ampies: "textExtract", "metaExtract". 
sub typ«(«) (comma fc»t)i 



r 

Pnccihle vuhtypec *r» Hefinarl hy th» WJtwka h/p». 
You liaic ived llie >«■ viir lyp« duLU rnttriLeLiui i. 

Example: using subtypes for hie types (doc. txt, pdf, ...) the service miqht wori/ for. 



| default (30) ^ 
50 - medium priority. 

The priority ot services can be changed by admin configuration, 



I - Print WUP comments 



The numbering of the quality If. defined by the service type. 
Tou have read the service type c 
Th» Hftfanlf nirality r*nrjF I* fl-1 (10. 



i nVp^nHWnry! 



| no special dependency T j 

farWglj program^) (rnmma lut): 



Program(s) needed to run this service (eg. "pert"), 



Les details suivants doivent etre saisis dans le formulaire : 
Title 

Un titre court et descriptif 

Description 

Courte description de la fonction 

Service type 

Type de service, defini par une chame de caracteres courte; exemples : metaExtract, 
textLang 
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Sub type 

Liste des sous-types possibles separes par des virgules ; ees derniers sont definis par le 
type de service. Certains types n'ont aueun sous-type. Le service metaExtract definit 
des formats de fichiers (jpg, sxw, pdf, ...) comme sous-types possibles. 

Priority 

On determine ici la priorite. Puisque les services sont selectionnes automatiquement, 
un mecanisme doit decider quel service sera selectionne s'il en existe plusieurs. C'est 
preeisement le role de cette valeur. La valeur normale est 50, el le doit etre comprise dans 
un intervalle de 0 a 100. Des valeurs au-dela de 100 peuvent etre specifies par apres 
par I'administrateur pour donner une priorite a des services specifiques. Si vous voulez 
des services en cascade, cette valeur determine I'ordre dans lequel ils sont parcourus. 
Dans la plupart des cas, il n'est pas necessaire de modifier la valeur. 

Quality 

Une autre valeur specifiant quel service a priorite ; pour le service texLang, qui determine 
la langue du texte, Quality definit le nombre de langues qui sont reconnues par text- 
Lang. Si deux services textLang sont installes avec Priority=50, le service qui reconnait 
le plus de langues sera choisi. Cette valeur depend done de la definition du type de 
service. 

Operating system dependency 

Definit si le service peut fonctionner sur des systemes Windows ou UNIX. 

External programs 

Nom d'un programme externe utilise par ce service ; celui-ci devrait normalement etre 
specifie sans chemin, puisque le systeme tente de trouver le programme requis par lui- 
meme. 

Les fichiers suivants sont crees par le Kickstarter a partir de I'exemple ci-dessus : 

doc/ 

wizard_f orm. dat 

wizard_form.html 
svl/ 

class . tx_cctxtextphp_svl .php 
sv2/ 

class . tx_cctxtextphp_sv2 .php 
ext_emconf . php 
ext_icon . gif 
ext_tables .php 

Comme vous le remarquez, cette extension contient deux services dans les repertoires sv1 / et 
sv2/. Une meme extension ne contiendra bien sur que des services du meme type. 

Le service est enregistre dans le systeme par la fonction t3lib_extMgm::addService(). 

t31ib_extMgm: : addService ( $_EXTKEY, ' textExtract ' /* sv type */, 
' tx_cctxtextphp_svl ' /* sv key */, 
array ( 

'title' => 'Text extraction for rtf, 
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'description' => 'This service depends on PHP only.', 

'subtype' => 'rtf, 

'available' -> true, 
'priority' => 50, 
'quality' => 50, 

' os ' => 
' exec ' => 

'classFile' => t31ib_extMgm: : extPath ( $_EXTKEY) . 
' svl/ class . tx_cctxtextphp_svl .php ' , 

'className' => ' tx_cctxtextphp_svl ' , 

) 

) ; 

Cela correspond, pour I'essentiel, aux details du formulaire du Kickstarter. 

Par defaut, un service enregistre est disponible si la valeur available de la configuration est 
mise a true. Vous pouvez bien sur specifier ici une expression booleenne. Si un service depend 
par exemple de la fonction PHP exif_read_data(), disponible seulement a partir de la version 
4.2.0 de PHP, on peut effectuer une verification grace a la ligne suivante : 

'available' => f unction_exists ( ' exif _read_data ' ) , 

Le service est alors automatiquement desactive si cette fonction n'est pas disponible. 

Les classes de service generees par le Kickstarter etendent la classe de base t3lib_svbase et 
contiennent par defaut les methodes init() et process(). La methode init() est appelee par le 
systeme. Grace a el le, vous initialisez I'objet et vous verifiez si le service est vraiment disponible. 
Si c'est le cas, la valeur true est retournee. Si d'autres tests ne sont pas necessaires, la methode 
peut etre laissee en I'etat, puisqu'elle est incluse dans la classe de base. 

L'exemple du service textExtract est repris. Ce dernier extrait du texte des documents Word et 
Excel. La mise en forme est ignoree. 

Deux services sont enregistres dans ext_tables.php. 

t31ib_extMgm: :addService ($_EXTKEY, 'textExtract' /* sv type */, 
' tx_cctxtextexec_sv2a' / * sv key */, 
array { 

'title' => 'Text extraction for Word documents (doc)', 
'description' => 'This service depends on catdoc ' , 

'subtype' => 'doc, dot', 

'available' => TRUE, 
'priority' => 50, 
'quality' => 50, 



' os ' => 

'exec' => 'catdoc' 
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'classFile' => t31ib_extMgm: : extPath ( $_EXTKEY) 
' sv2 /class . tx_cctxtextexec_sv2 .php ' , 

' className ' => ' tx_cctxtextexec_sv2 ' , 

) 

) ; 



t31ib_extMgm: : addService ( $_EXTKEY, ' textExtract ' /* sv type */, 
' tx_cctxtextexec_sv2b' /* sv key */, 
array ( 

'title' => 'Text extraction for Excel documents (xls)', 
'description' => 'This service depends on xls2csv' , 

'subtype' => 'xls,xlt,xlw' , 

'available' => TRUE, 
'priority' => 50, 
'quality' => 50, 

' os ' => 

'exec' => 'xls2csv', 

'classFile' => t31ib_extMgm: : extPath ( $_EXTKEY) . 
' sv2/ class . tx_cctxtextexec_sv2 .php ' , 

'className' => ' tx_cctxtextexec_sv2 ' , 

) 

) ; 

Si vous observez la definition des cles du service (tx_cctxtextexec_sv2x) et la classe specifiee, 
vous remarquerez que deux services sont enregistres avec la meme classe. C'est tout a fait 
permis. Puisque ('implementation est totalement identique pour les deux services, et puisqu'ils 
sont destines aux memes types de fichiers, ils ont ete developpes en une classe. Les types de 
fichiers doc ou dot pour les documents Word et xls, xlt et xlw pour les documents Excel ont 
ete specifies en tant que sous-types. La variable exec contient les noms de fichiers (catdoc, 
xls2csv) des outils externes requis pour ce service. Dans la methode initfj de la classe de base, 
on verifie si ces programmes sont disponibles. 

Comme vous le voyez, la classe tx_cctxtextexec_sv2 ne contient que la methode process(). 
Le nom processfj est reserve par convention. Un service contenant cette methode agit comme 
un filtre : il peut traiter des donnees transferees par la variable $content, et egalement des 
fichiers. L'application appelante peut, de la meme maniere, recuperer les donnees en tant que 
variables ou fichiers. On specifie la methode process() pour tester de la meme maniere les 
services « filtres ». Si vous introduisez un nouveau type de service, vous pouvez utiliser votre 
propre API et vous ne devez pas passer par la methode process(). 

require_once (PATH_t31ib. ' class . t3 lib_svbase .php ' ) ; 

class tx_cctxtextexec_sv2 extends t31ib_svbase { 
var $prefixld = ' tx_cctxtextexec_sv2 ' ; 

var $scriptRelPath = ' sv2 /class . tx_cctxtextexec_sv2 .php ' ; 
var $extKey = ' cc_txtextexec ' ; 
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I * * 

* performs the text extraction 

* @param string Content which should be processed to 

* extract text . 

* @param string Content type 'doc', 'dot', ... 

* @param array Configuration array 

* ©return boolean 
*/ 

function process ( $content= ' ' , $type= ' ' , $conf =array ( ) ) { 

$this->out = 

if ($content) { 

$this->setlnput ($content, $type) ; 

} 

if ($inputFile = $this->getInputFile ( ) ) { 
switch ($this->inputType) { 

case ' doc ' : 
case ' dot ' : 

$cmd = t31ib_exec: : getCoiranand ( 'catdoc' ) . ' -d8859-l 



1 ' . $inputFile . 



" ' . $inputFile. 



$this->out = shell_exec ( $cmd) ; 
break ; 
case 'xls' 
case 'xlt' 
case 'xlw' 

$cmd = t31ib_exec: : getCommand ( 'xls2csv' ) . ' -d8859-l 

$this->out = shell_exec ( $cmd) ; 
break; 



supported. ' ) ; 



} 



// if that is reached the caller made a mistake 
default : 

$this->errorPush(T3_ERR_SV_WR0NG_SUBTYPE, 

'Subtype " ' . $this->inputType . ' " is not 

break; 



} else { 

$this->errorPush(T3_ERR_SV_N0_INPUT, 'No or empty input.'); 

} 

if ($this->out AND intval ($conf [ ' limitOutput' ] ) ) { 
$this->out = substr ( $this->out , 0, 

intval ( $conf [ ' limitOutput ' ] ) ) ; 

} 



return $this->getLastError ( ) ; 

} 

} 
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Plusieurs fonctions sont disponibles dans la classe de base pour configurer un filtre. Par exem- 
ple, des fichiers temporaires sont erees automatiquement, ou bien des fichiers sont lus dans 
une variable, en fonetion de la requete du service ou de I'application appelante. 

Dans cet exemple, les donnees transferees sont enregistrees, si necessaire : 

if ($content) { 

$this->setlnput ($content, $type) ; 

} 

Puisque les programmes externes catdoc et xls2csv exigent un fichier a trailer, on specifie 
a la ligne suivante un fichier avec des donnees. Ce dernier sera cree automatiquement s'il 
n'existe pas, parce que les donnees ont ete enregistrees via setlnputFile(). Si I'application ap- 
pelante a enregistre precedemment un fichier avec setlnputFile(), ce dernier est utilise directe- 
ment. ['application appelante peut sol liciter une variable avec getOutputf) ou un fichier avec 
getOutputFilef). L'appel au service textExtract ressemble a ceci : 

if ( is_obj ect ( $serviceObj = t31ib_div: rmakelnstanceService ( ' textExtract ' , 

$f ile_type) ) ) { 

$serviceObj ->setInputFile ( $absFile, $file_type) ; 
$serviceObj ->process ( ' ' , '', $conf); 
$output = $serviceObj ->getOutput ( ) ; 

$serviceObj ->unlinkTempFiles ( ) ; 

} 

L'appel de la methode unlinkTempFilesf) est important pour supprimer les fichiers temporaires 
du service. Sinon, vous pouvez, grace a la fonetion 

... = &t31ib_div: :makeInstanceService ( ... 

demander une reference a I'objet, qui supprimera independamment les fichiers temporaires. 
7.9.3 Configuration 

Les donnees de configuration pour les services sont stockees dans le tableau $TYP03_CONF_ 
VARS['SVCONF'][serviceType]. 

$TYP03_CONF_VARS [ ' SVCONF ' ] [serviceType] [ ' setup ' ] 

Ce tableau peut contenir les donnees de configuration du script appelant, et n'est pas pris en 
compte par les services eux-memes. 

$TYP03_CONF_VARS [ ' SVCONF ' ] [serviceType] [ ' default ' ] 

Les valeurs par defaut pour le type de service sont definies dans ce tableau. Ces dernieres sont 
utilisees tant que des valeurs particulieres ne sont pas definies par la cle de service. 

$TYP03_CONF_VARS [ ' SVCONF ' ] [serviceType] [serviceKey] 

La classe de base des services t3lib_svbase fournit une methode getServiceConfigPj pour lire 
les valeurs de configuration a partir des tableaux presentes ci-dessus, oil la configuration avec 
les cles de service a priorite sur la configuration par defaut. 
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7.9.4 Introduction d'un nouveau type de service 

Les differents types de services ne sont pas figes. N'importe qui peut introduire un nouveau 
type de service. Si vous souhaitez aller dans cette direction, I'API destinee au nouveau type 
doit etre discutee avec d'autres developpeurs, puisque utiliser un service une seule fois n'a 
pas beaucoup de sens. Vous devriez introduire le nouveau service dans la liste de diffusion 
des developpeurs TYP03, et si possible inclure un exemple d'implementation a telecharger. La 
documentation de I'API et des sous-types est generalement mise a disposition par la suite. 



7.10 XCLASS : modification et extension de classe 

Comme nous I'avons vu, TYP03 peut etre etendu de maniere simple grace au systeme d'ex- Reference 745255 

tensions. Les fonctionnalites sont encapsulees dans des plugins ou des modules qui sont faci- 

lement installes. Mais pour des applications plus complexes, il peut etre necessaire d'apporter 

des changements a TYP03 lui-meme. Cela ne pose pas de probleme, bien sur, puisque le code 

source de TYP03 est disponible. Mais cela rend plus difficile la mise a jour en cas de nouvelle 

version de TYP03. Les changements doivent etre documentes pour pouvoir etre ajoutes plus 

tard dans la nouvelle version. 

TYP03 propose les XCLASS comme solution elegante a ce probleme. Le concept des XCLASS 
permet de modifier ou d'etendre presque toutes les classes de TYP03. 

Supposons que vous ayez besoin d'une fonction dans I'objet TypoScript stdWrap pour convertir 
un entier en mots. Cette fonction sera alors disponible pour tout le systeme, et vous pourrez 
I'utiliser partout oil I'objet TypoScript de type stdWrap est defini. 

On trouve rapidement sur Internet un script approprie de conversion de nombre. La seule 
question est a present de savoir comment I'integrer au mieux dans la fonction stdWrap. II 
existe ici plusieurs possibility : 

1. Integrer la fonctionnalite directement dans la fonction stdWrapfJ dans la classe class. 
tslib_content.php, avec le desavantage deja mentionne : les mises a jour sont plus 
difficiles. 

2. stdWrap fournit un moyen d'integrer des fonctions utilisateurs. C'est en soi une pos- 
sibility valable et utile. Mais, dans notre exemple, nous voudrions faire directement 
reference a la fonction avec I'identifiant userNumToWord. 

3. Extension de la methode stdWrap dans la classe tslib_content via XCLASS. Cette me- 
thode est eel le qui repond le mieux a nos besoins. 

Si nous observons la fin du fichier class.tslib_content.php, nous avons les lignes suivantes : 

if ( defined ( 'TYP03_M0DE' ) && $TYP03_C0NF_VARS [TYP03_M0DE] [' XCLASS '] [ 

' tslib/class . tslib_content .php ' ] ) { 
include_once ($TYP03_C0NF_VARS [TYP03_M0DE] ['XCLASS'] [ 

' tslib/class . tslib_content .php ' ] ) ; 

} 

Par consequent, si la variable 
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$TYP03_CONF_VARS [TYP03J40DE] [ 'XCLASS' ] [ ' tslib/class . tslib-Content . php ' ] 

contient le nom d'un fichier, ce fichier sera insere par include_once(). Cela signifie que nous 
pouvons inserer un fichier qui peut alors etendre la classe tslib_content Presque tous les 
fiehiers de TYP03 contenant une classe, meme ceux des extensions, comprennent ces lignes 
relatives a XCLASS dans les dernieres lignes. 

A present, il vous reste a initialiser la variable presentee ci-dessus en fonction de vos besoins, 
et votre script sera integre. Cette operation est realisee dans le fichier extjocalconf.php de 
votre propre extension. Gardez a I'esprit que TYP03_MODE est une constante, definie soit 
comme 'FE', soit comme 'BE' selon que vous etes dans le frontend ou dans le backend. Dans 
notre exemple frontend, nous devons done remplacer TYP03_MODE par 'FE'. 

L'exemple d'extension avec la cle user_NumToWord ressemble a ceci : 

doc/ 

ext_emconf . php 

ext_icon . gif 

ext_localconf .php 

class . ux_tslib_content .php 

extjocalconf.php 

if (Idefined ( ' TYP03_MODE ' ) ) die ('Access denied.'); 

$TYP03_CONF_VARS [ ' FE ' ] [ ' XCLASS ' ] [ ' tslib/class . tslib_content . php ' ] 
=t31ib_extMgm: :extPath( 'user_NumToWord' ) . ' class . ux_tslib_content . php ' ; 

class.ux_tslib_content.php 

class ux_tslib_cObj extends tslib_cObj { 

function stdWrap ( $content , $conf ) { 

// Call the real stdWrap function in the parent class: 
{content = parent :: stdWrap ( {content , $conf ) ; 

// Process according to my user-defined property: 
if { $conf [ 'userNumToWord' ] ) { 

{content = $this->ux_numToWord ( {content , 

{conf [ ' userNumToWord . ' ] ) ; 

} 

return {content; 

} 

function ux_numToWord ( $content , $conf ) { 
return $content; 

} 

} 

if (def ined( 'TYP03_M0DE' ) && {TYP03_C0NF_VARS [TYP03_M0DE] ['XCLASS'] [ 
' ext/user_NumToWord/class . ux_tslib_content .php ' ] ) { 

include_once ({TYP03_C0NF_VARS [TYP03_M0DE] [ ' XCLASS ' ] 
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[ ' ext/user_NumToWord/class . ux_tslib_content .php ' ] ) ; 
} 

L'extension via XCLASS est terminee. Cependant, si vous avez ete attentif, vous pourriez vous 

demander comment le systeme sait que ux_tslib_cObj doit etre instancie a la place de tsl ib 

cObj. C'est grace a t3lib_div::makelnstance(), qui est utilise au sein de TYP03 a la place de 
new(). 

Les dernieres lignes du fichier class.ux_tslib_content.php contiennent le code XCLASS habi- 
tuel. II est done aussi possible d'etendre la classe ux_tslib_cObj. 

La methode XCLASS comporte aussi des desavantages : d'une part, seule une XCLASS est pos- 
sible par fichier, et d'autre part, vous n'etes pas tout a fait a I'abri de tout probleme lors d'une 
mise a jour de TYP03, puisque I'API de la classe etendue peut avoir change. Mais cela reste un 
moyen utile pour apporter des changements au cceur du code source. 



7.1 1 TYP03 et autres langages de programmation 

D'autres langages de programmation que PHP peuvent actuellement etre utilises dans une 
mesure tres limitee avec TYP03. Alors qu'il est possible, et meme courant, pour des langages 
compiles, de melanger plusieurs langages de programmation au sein d'un projet, cela reste 
encore a un stade experimental pour des langages interpretes. Des extensions experimentales 
PHP existent pour integrer du JAVA et du .NET dans du code PHP. Inversement, il est aussi 
possible d'acceder a des objets PHP depuis du code JAVA. Cela signifie que des extensions en 
JAVA sont certainement possibles. Mais elles devront integrer tous les fichiers PHP necessaires 
a une extension. Cela signifie qu'un « wrapper » PHP sera necessaire pour appeler le code 
JAVA. 

En attendant, il est possible, bien sur, d'appeler des programmes externes avec exec() ou des 
ressources externes en tant que services Web. Mais il ne s'agit pas d'une integration complete. 

L'integration devient un theme de plus en plus important partout dans le monde de I'informa- 
tique, certainement grace a I'emergenee, ces dernieres annees, de standards d'interoperabilite. 
PHP evolue aussi en ce sens. Par consequent, il est fort probable que les possibility d'integration 
seront encore plus importantes a I'avenir. 

7. 1 2 Outils pour le developpeur 
7.12.1 ExtDevEval 

Le module backend Tools — > ExtDevEval fournit un ensemble de fonctions utiles pour le 
developpement d'extensions. 

Notez que lors de I'utilisation de l'extension ExtDevEval dans le backend, une serie de liens 
apparaissent en haut de I'interface backend. Ceux-ci ouvrent la fenetre qui contient la docu- 
mentation de I'API, ou qui renvoie a la documentation surTYP03.org. 

De plus, le module contient les fonctions suivantes : 
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getLL() converter 

Convertit les textes au sein du code source pour leur utilisation dans les fichiers lo- 
callang 

PHP script documentation help 

Insere les commentaires Javadoc manquants dans les fonctions. 

Create/Update Extensions PHP API data 

Lit les commentaires JavaDoc et genere, a partir de ceux-ci, un fichier ext_php_api.dat 
qui sert a la creation de la documentation de I'API. 

Display API from "ext_php_api.dat" file 

Affiche la documentation de IAPI a partir d'un fichier ext_php_api.dat. 

temp.CACHED files confirmed removal 

Supprime les fichiers temp_CACHED_* de typo3conf/ 

PHP source code tuning 

Mise en forme du code source PHP et modification pour respecter les conventions 
d'ecriture. 

Code highlighting 

Affiche PHP, TypoScript et le XML en couleurs. Utile lors de la consultation de la docu- 
mentation. 

CSS analyzer 

Presente le CSS pour les elements au sein d'un code HTML specifie. 
Table Icon Listing 

Affiche les possibilites d'icone pour un enregistrement (cache, acces reserve, ...) 



7. 1 2.2 Debogage avec debugO 

Reference 705356 TYP03 fournit un peu de support pour le debogage PHP sous la forme d'une fonction globale 
debugf). Cette fonction affiche des variables directement sous un format lisible, y compris 
pour des tableaux imbriques. 

La fonction debugf) transfere les variables a afficher, si elles sont disponibles, a la methode 
$GLOBALS['error']->debug(). Cet objet n'est pas cree par TYP03 lui-meme et peut done etre 
mis a disposition par une extension. L'extension CCDebug (cc_debug) en est un exemple. El le 
collecte les informations de debogage et les affiche dans sa propre fenetre, qui peut etre 
activee en cliquantsur I'icone representant une bombe. 
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File Edit View Go Bookmarks Tools Help 

Q Q 




[debug] in 

/vdi/wwn/hilebi/lypo3_si t-3.5,0/LytJu3/c»l/^_ylusadi/pi2/dab»,Lx_i;tylu!n.ai_pi2.php on litic 51 

un»r vari ahl » riehir«j 
> Source report from 
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La fonction debug est definie eomme suit : 

function debug { $variable , $name = ' *variable* ' , $line = '*line*', 
$file = '*file*', $level = E_DEBUG) 

La fonction incorporee ne renvoie que la variable elle-meme, ainsi que sa description dans 
$name. Tous les autres parametres sont ignores. Par contre, ils sont pris en compte par CCDe- 
bug, qui affiche le numero de la ligne, et le nom du fichier, pour autant que les constantes 
LINE et FILE soient passees en arguments. 

debug (time () , 'current time', LINE , FILE ) ; 

Si vous voulez utiliser la fonction debug incorporee, alors que I'extension de debogage est 
installee, vous pouvez appeler la fonction xdebugQ. 



Extension Debug 

II est assez facile de developper votre propre extension de debogage. Au sein du fichier extjo- 
calconf.php, vous devez creer un objet dans $GLOBALS['error'], qui contient la fonction de- 
bug() avec les arguments mentionnes plus haut. Si le but de cette extension est, de maniere 
similaire a CCDebug, de collecter les informations et uniquement de les afficher dans la page, 
on doit aussi y inclure la methode debugOutputQ. 
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7.12.3 Debogage avec t3lib_div::devLog() 

Reference 544345 Outre la possibility de creer un format d'affichage pour les recherches d'erreur avec la fonction 
debugf), TYP03 offre une seconde interface via la fonction t3lib_div::devLog(). Par opposition 
a debugO, TYP03 ne met pas en oeuvre une fonction par defaut pour t3lib_div::devLog(). 
Cette derniere met a disposition uniquement une interface homogene, de sorte qu'un appel a 
t3lib_div::devLog() sans extension associee n'a pas le moindre effet. 

CCDevLog (cc_devlog) est une extension mettanten oeuvre I'interface de (cc.devlog) qui en- 
registre les traces (logs) dans une table de la base de donnees. Un module backend vous aide 
a afficher les donnees. Ce module peut aussi s'ouvrir dans une fenetre separee, le rendant 
disponible parallelement au backend. 



Figure 7.51: 
Module CCDevLog 
pour I'affiehage des 
logs 
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La fonction devLogO dans t3lib_div est definie comme suit : 



Sparam 
Sparam 

@param 

@param 
Ureturn 



string 
string 



integer 



array 
void 



Message (in english) . 

Extension key (from which extension you are 
calling the log) 

Severity: 0 is info, 1 is notice, 2 is warning, 
3 is fatal error, -1 is "OK" message 
Additional data you want to pass to the logger. 



function devLog($msg, $extKey, $severity=0, $dataVar=FALSE ) 



Voici un extrait de t3lib_userAuth, qui illustre I'utilisation de t3lib_div::devLog(). 

if ( $TYP03_CONF_VARS [ 'SC_OPTIONS' ] [ ' t31ib/class . t31ib_userauth . php ' ] 
[ 'writeDevLog' ] ) $this->writeDevLog = TRUE; 
if (TYP03_DLOG) $this->writeDevLog = TRUE; 
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if ( $this->writeDevLog) t31ib_div : : devLog ( 'No user session found.', 
' t31ib_userAuth' , 2) ; 

Un test est d'abord effectue pour verifier si writeDevLog est defini dans $TYP03_C0NF_VARS 
au sein du script courant. Si e'est le cas, $this->writeDevLog est mis a TRUE. La eonstante 
TYP03_DL0G est trait.ee exactement de la meme facon. II est done possible d'activer les logs 
uniquement pour ce script ou pour un objet, ou encore de I'activer pour tout le systeme, grace 
a la eonstante TYP03_DL0G. L'appel lui-meme a devLogO est toujours precede d'un test sur 
la variable $this->writeDevLog. 

Extension DevLog 

Le principe de I'extension de type DevLog est de declarer une fonction qui sera ensuite appelee 
par t3lib_div::devLog() avec les donnees de log. Ceci est illustre ci-dessous grace a un extrait 
de I'extension CCDevLog. 

localconf.php 

La fonction devLogO de la classe tx_ccdevlog dans class.tx_ccdevlog.php est d'abord declaree 
dans le fichier localconf.php de I'extension CCDevLog. 

$TYP03_C0NF_VARS [ 'SC_OPTIONS' ] [ ' t31ib/class . t31ib_div . php ' ] [ 'devLog' ] 
[$_EXTKEY] = 'EXT: ' . $_EXTKEY . ' /class . tx_ccdevlog . php : tx_ccdevlog 
->devLog' ; 

Comme vous pouvez le remarquer, votre propre fonction DevLog est definie dans le tableau 
'devLog' avec votre propre cle d'extension : ...['devLog'] [$_EXTKEY]. Cela signifie que plusieurs 
extensions DevLog peuvent etre definies en meme temps. El les sont alors appelees les unes 
apres les autres, avec les donnees de log. 

class.tx_ccdevlog.php 

La fonction devLogO declaree plus haut est situee dans ce fichier. Dans votre propre extension, 
ce fichier doit bien sur etre nomme pour correspondre a la cle d'extension. Dans le cas de 
I'extension CCDevLog, les donnees de log transferees sont traitees et enregistrees dans la table 
de la base de donnees. 

class tx_ccdevlog { 
I * * 

* DevLog function - writes log to db 
* 

* @param array log data array 

* ©return void 
*/ 

function devLog ( $logArr) { 
$insertFields = array!) ; 
$insertFields [ 'msg ' ] = $logArr [ 'msg' ] ; 
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$insertFields [ ' extkey' ] = $logArr [ ' extKey' ] ; 
$insertFields [' severity ' ] = $logArr [' severity '] ; 
if ( ! empty ($logArr [ 'dataVar' ] ) ) { 
$insertFields [ ' data_var ' ] = 
$GLOBALS [ 'TYP03_DB' ] ->quoteStr ( serialize ( $logArr [' dataVar ' ] , 
' tx_ccdevlog' ) ; 

} 

$GLOBALS [ ' TYP03_DB ' ] ->exec_INSERTquery ( ' tx_ccdevlog ' , 

$insertFields) ; 



Une autre option de debogage, completement independante de TYP03, consiste a utiliser des 
environnements de developpement tels que Zend IDE ou PHPeclipse. La description de ce pro- 
cessus depasse le cadre de ce livre. Neanmoins, nous introduirons brievement quelques IDE. 



7.1 2.4 EE Debug/Info output et BE Env-lnfo 

II est parfois utile d'afficher les donnees d'objets typiques tels que $TSFE et $BE_USER ou les 
variables d'environnement de t3lib_div::getlndpEnv(). 

On peut consulter ces donnees grace, par exemple, aux extensions FE Debug/Info output 
(cc_feinfo) et Backend Environment Information (cc_beinfo), sans devoir generer les resultats 
via la fonction debug(). 

La premiere extension est un plugin que vous pouvez inserer dans une page, la seconde est 
un module. Le module ne peut pas afficher les donnees qui sont pertinentes dans le contexte 
de votre propre module. Mais vous pouvez I'utiliser comme gabarit et facilement generer le 
resultat dans votre propre module pour vos tests, puisque ces resultats sont integres dans une 
classe separee. 



Figure 7.52: 
Exemple d'affichage 
du plugin FE Debug/ 

Info output 
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TSFE (oxcorpt): 
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Si vous voulez integrer cet affichage pour vos tests dans votre propre plugin, vous le realiserez 
tres facilement grace aux lignes suivantes : 

require_once ( t31ib_extMgm: : extPath ( ' cc_f einf o ' ) . 
' class . tx_ccf einf o .php ' ) ; 

$info = t31ib_div: rmakelnstance ( ' tx_ccf einf o ' ) ; 
$info->init($this) ; 

$content.= $inf o->pi_getInf oOutput ( ) ; 

7.12.5 Environnements de developpement PHP 

Si vous programmez de maniere intensive, dans des projets complexes, un editeur de texte 
n'est pas I'outil le plus adequat. Mais meme un programmeur occasionnel peut beneficier d'un 
IDE (Integrated Development Environment). Les IDE fournissent generalement une validation 
de la syntaxe dans I'editeur, comprennent un systeme de gestion de projets et integrent des 
outils tels que CVS, FTP, et WebDAV. Un bon IDE fournit aussi un support au debogage. 

Le choix de TIDE le plus approprie a vos besoins est une question de gout, raison pour la- 
quelle nous vous recommandons ici d'en tester quelques-uns. Des versions devaluation sont 
generalement mises a disposition par les editeurs, ou sont meme gratuites en tant que logiciels 
libres. 

Voici une courte liste d'environnements de developpement PHP : 

Environnement de developpement Zend 

IDE developpe par Zend, le concepteur du PHP. 
Plate-formes : Unix/Linux, Mac OS X, Windows 
http://www.zend.com 

PHPeclipse 

Projet Open Source base sur Eclipse (http://www.eclipse.org), qui met en ceuvre un 
plugin PHP ; I'un des avantages est le grand nombre de plugins dans TIDE Eclipse : CVS, 
SQL, XML, HTML, JavaScript, Regex, outils collaboratifs, ... 
Plate-formes : Unix/Linux, Mac OS X, Windows 
http://www.phpeclipse.de 
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Developpement de sites Web collaboratifs 
orientes publication de contenu 

□util Open Source et gratuit, TYP03 fait partie comme SPIP de la famille des CMS [Content Mana- 
gement Systems] bases sur le langage PHP. Plus riche fonctionnellement, mais aussi plus complexe 
que SPIP, TYP03 est ideal pour le developpement de sites Web ou d'intranets orientes publication de 
contenu et partage d'informations. II connaTt un succes croissant aupres des administrations, des col- 
lectivites locales, des portails d'information ou de presse en ligne, et des entreprises cherchant a 
mettre en place un intranet de travail collaboratif ou de gestion documentaire. 

Le guide de reference des redacteurs, administrateurs 
et developpeurs TYP03 

Ecrit par trois des membres du projet TYP03, cet ouvrage de reference riche en conseils methodo- 
logiques et en exemples pratiques est decoupe en quatre parties : 

• Introduction a TYPD3 et installation du produit sous Windows et Linux. 

• TYP03 pour les redacteurs et editeurs de contenu, qui decouvriront comment inserer et formater 
des textes et des images, creer des bulletins d'information, des forums de discussion, des agendas 
d'evenements et autres animations editoriales. 

• TYP03 pour les administrateurs, qui apprendront a gerer les droits d'acces des utilisateurs, a definir 
les regies de travail collaboratif, a analyser la frequentation du site et a en optimiser les performances. 

• TYP03 pour les developpeurs, qui decouvriront comment personnaliser un site en creant de nou- 
veaux gabarits et en developpant des fonctionnalites inedites grace au systeme d'extensions de TYP03. 



Au som ma ire 

Installation et prise en main • Les CMS (Content Management Systems) et TYP03 • Installation de 
TYP03 sous Windows ou sous Linux • Configuration du serveur • TYP03 pour les redac- 
teurs • Interface utilisateur • Modules, centre de taches • Insertion de contenus • Outils de produc- 
tivity • TYP03 pour les administrateurs • Gestion des droits d'acces et des utilisateurs • Gestion du 
workflow* Procedures d'automatisation • Gestion des performances [cache...) • Statistiques et 
logs • Gestion des fichiers numeriques et de leurs metadonnees • TYP03 pour les deue- 
loppeurs • TypoScript : syntaxe du langage, outils de developpement, gabarits standards et creation 
de gabarits... • Le systeme d'extensions de TYP03 • Developpement d'extensions personnalisees. 
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